/* ==========================================================================
   DataRipple Design System — Colors & Type
   Derived verbatim from ripplecore-hub (app/styles/shared/tokens.css +
   app/styles/global.css @theme). Dark-first, teal/orange dual accent.
   ========================================================================== */

/* Dashboard fonts are self-hosted to keep this app surface static and portable. */

@font-face {
  font-family: "Ubuntu";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/dashboard/assets/fonts/Ubuntu-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("/dashboard/assets/fonts/Ubuntu-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/dashboard/assets/fonts/Ubuntu-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/dashboard/assets/fonts/Ubuntu-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/dashboard/assets/fonts/Ubuntu-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("/dashboard/assets/fonts/Ubuntu-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/dashboard/assets/fonts/Ubuntu-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("/dashboard/assets/fonts/Ubuntu-BoldItalic.ttf") format("truetype");
}

:root {
  /* ---- Backgrounds (dark-first) ---- */
  --bg:              #0A0F16;   /* page */
  --bg-2:            #0d1220;   /* page secondary */
  --bg-deep:         #080c14;   /* deepest */
  --surface:         #0f172a;   /* alt surface */
  --shell:           #0B121D;   /* sidebar/top chrome */
  --shell-glass:     rgba(10,15,22,0.7);
  --shell-rule:      rgba(47,60,78,0.5);
  --dot-ring:        #0B121D;
  --card:            #1a2332;   /* elevated card */
  --card-2:          #121B27;   /* card base */
  --card-3:          #161f2e;   /* card sunken */
  --border:          #2F3C4E;   /* default border */
  --border-strong:   #3a4a5e;

  /* ---- Text ---- */
  --fg-1:            #ffffff;   /* strongest (white) */
  --fg-2:            #DFE7F4;   /* body (primary text, off-white) */
  --fg-3:            #ADBFD6;   /* muted */
  --fg-4:            #94A3B8;   /* secondary */
  --fg-dim:          #5a7a9a;   /* tertiary / labels */

  /* ---- Brand: Teal (primary) ---- */
  --teal:            #0ABFBC;   /* legacy brand teal — admin & persona */
  --teal-secondary:  #089996;
  --teal-subtle:     rgba(10, 191, 188, 0.10);
  --teal-soft:       rgba(10, 191, 188, 0.20);
  --teal-strong:     rgba(10, 191, 188, 0.35);
  --teal-glow:       rgba(10, 191, 188, 0.10);

  /* ---- Brand: Sky (Assessment / Tailwind @theme "brand-teal") ---- */
  --sky:             #0EA5E9;   /* assessment primary */
  --sky-dark:        #0284C7;
  --sky-light:       #38BDF8;

  /* ---- Brand: Orange (secondary / CTA) ---- */
  --orange:          #EA5428;
  --orange-light:    #F7714A;
  --orange-dark:     #CC3B11;
  --orange-glow:     rgba(234, 84, 40, 0.25);

  /* ---- Semantic ---- */
  --success:         #22c55e;
  --success-soft:    rgba(34, 197, 94, 0.12);
  --success-strong:  rgba(34, 197, 94, 0.35);
  --warning:         #f59e0b;
  --warning-soft:    rgba(245, 158, 11, 0.12);
  --warning-strong:  rgba(245, 158, 11, 0.35);
  --danger:          #f43f5e;
  --danger-soft:     rgba(244, 63, 94, 0.12);
  --danger-strong:   rgba(244, 63, 94, 0.35);
  --violet:          #a78bfa;
  --violet-soft:     rgba(168, 85, 247, 0.12);

  /* ---- Transparency ladders ---- */
  --surface-1:       rgba(255, 255, 255, 0.02);
  --surface-2:       rgba(255, 255, 255, 0.03);
  --surface-3:       rgba(255, 255, 255, 0.06);
  --scrim:           rgba(0, 0, 0, 0.5);
  --scrim-soft:      rgba(0, 0, 0, 0.35);

  /* ---- Gradients ---- */
  --grad-cta:        linear-gradient(135deg, #0ABFBC 0%, #0EA5E9 100%);
  --grad-cta-hover:  linear-gradient(135deg, #089996 0%, #0c8ed1 100%);
  --grad-orange:     linear-gradient(133deg, #F7714A, #CC3B11);
  --grad-ripple:     linear-gradient(135deg, #0f1a2b 0%, #0a1220 100%);

  /* ---- Radius ---- */
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       20px;

  /* ---- Elevation ---- */
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.2);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:       0 30px 80px rgba(0,0,0,0.55), 0 10px 30px rgba(0,0,0,0.35);
  --shadow-cta:      0 4px 12px rgba(234, 84, 40, 0.25);
  --shadow-cta-h:    0 6px 16px rgba(234, 84, 40, 0.35);
  --focus-ring:      0 0 0 3px rgba(10, 191, 188, 0.1);

  /* ---- Spacing scale (multiples of 4) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px;

  /* ---- Typography: families ---- */
  --font-heading:    "Ubuntu", system-ui, sans-serif;
  --font-body:       "Ubuntu", system-ui, sans-serif;
  --font-display:    "Ubuntu", system-ui, sans-serif;
  --font-ui:         "Ubuntu", system-ui, sans-serif;
  --font-mono:       "SF Mono", "Fira Code", "Consolas", ui-monospace, monospace;

  /* ---- Typography: semantic roles ---- */
  --fs-h1: 26px;  --lh-h1: 32px;   --fw-h1: 700;
  --fs-h2: 17px;  --lh-h2: 22px;   --fw-h2: 700;
  --fs-h3: 15px;  --lh-h3: 20px;   --fw-h3: 600;
  --fs-body: 14px;     --lh-body: 22px;     --fw-body: 400;
  --fs-body-sm: 13px;  --lh-body-sm: 20px;
  --fs-meta: 12px;     --lh-meta: 18px;
  --fs-label: 11px;    --lh-label: 16px;    --fw-label: 700;
  --fs-code: 13px;     --lh-code: 20px;
  --fs-hero: 28px;     --lh-hero: 33px;
}

:root[data-theme="light"] {
  --bg:              #f5f7fb;
  --bg-2:            #eef3f8;
  --bg-deep:         #e7edf5;
  --surface:         #ffffff;
  --shell:           #ffffff;
  --shell-glass:     rgba(255,255,255,0.78);
  --shell-rule:      rgba(215,225,237,0.95);
  --dot-ring:        #ffffff;
  --card:            #ffffff;
  --card-2:          #f7fafc;
  --card-3:          #eef3f8;
  --border:          #d7e1ed;
  --border-strong:   #b8c8d8;
  --fg-1:            #0a0f16;
  --fg-2:            #1e2a38;
  --fg-3:            #4d6075;
  --fg-4:            #64748b;
  --fg-dim:          #7a8da3;
  --surface-1:       rgba(15, 23, 42, 0.03);
  --surface-2:       rgba(15, 23, 42, 0.055);
  --surface-3:       rgba(15, 23, 42, 0.09);
  --scrim:           rgba(15, 23, 42, 0.32);
  --scrim-soft:      rgba(15, 23, 42, 0.18);
  --shadow-sm:       0 1px 3px rgba(15,23,42,0.10);
  --shadow-md:       0 6px 18px rgba(15,23,42,0.12);
  --shadow-lg:       0 24px 70px rgba(15,23,42,0.18), 0 8px 22px rgba(15,23,42,0.12);
}

/* ==========================================================================
   Base element defaults (opt-in; include as needed)
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 8px;
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  color: var(--fg-1);
  margin: 0 0 4px;
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  color: var(--fg-2);
}

.label-caps {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.meta {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-dim);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: var(--lh-code);
}

/* Gradient text helper (CTA headlines) */
.text-gradient-teal {
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}