/**
 * AI coders: read /CONTRIBUTIONS.md first. It points to /DOCS/ for
 * architecture, local dev, auth, and schema rules. Do not skip on
 * your first pass through this repo — the layout has non-obvious
 * conventions that the docs make explicit.
 */

/* ==========================================================================
   DataRipple Design System — Colors & Type
   :root carries the DataRipple-NEW palette (light surfaces, brand red
   #CC0C1F) as the platform baseline. The retired classic dark teal palette
   is preserved as an opt-in dev reference under
   :root[data-skin="dataripple-classic"] in dashboard/css/skins/dataripple-classic.css,
   reachable via ?skin=dataripple-classic. Prod is locked to dataripple-new
   (BE FORCED_SKIN + FE skin-lock v2026.06.09-17) so the runtime cascade
   always resolves to the new palette regardless of these :root defaults;
   what these defaults govern is what HTML written WITHOUT an explicit
   [data-skin] qualifier inherits (e.g. new pages authored by an AI agent).
   ========================================================================== */

/* 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 (LIGHT — clean white DataRipple surfaces) ---- */
  --bg:              #FFFFFF;
  --bg-1:            #FFFFFF;
  --surface-secondary: #eef2f7;
  --bg-2:            var(--surface-secondary);
  --bg-3:            #eef2f7;
  --bg-deep:         #eef2f7;
  --surface:         #FFFFFF;
  --shell:           #1B2433;   /* dark-800 — sidebar nav (stays dark across all skins) */
  --shell-glass:     #1B2433;   /* fully opaque — avoids topbar/sidebar mismatch on light bg */
  --shell-rule:      rgba(255,255,255,0.08);
  --dot-ring:        #1B2433;
  --card:            #FFFFFF;
  --card-2:          #FFFFFF;
  --card-3:          #eef2f7;
  --border-default:  #cdd8e8;                /* DS: blue-family divider */
  --border:          var(--border-default);  /* visible divider alias */
  --border-input:    #2F3C4E;                /* DS: form fields, checkboxes, cards on light bg */
  --border-strong:   var(--border-input);    /* alias kept for existing usages */
  --border-subtle:   rgba(0,0,0,0.06);       /* DS: hairlines */
  --border-on-dark:  rgba(255,255,255,0.10); /* DS: dividers on dark surfaces */

  /* ---- Text (DARK on light) ---- */
  --fg-1:            #0B1220;   /* dark-900 — headlines */
  --fg-2:            #18293B;   /* ink — body */
  --fg-3:            #5A6B7B;   /* text-mid — captions, muted */
  --fg-4:            #5A6B7B;
  --fg-dim:          #5A6B7B;

  /* ---- Brand: --teal token → DataRipple Red (--brand-primary #CC0C1F) ---- */
  --teal:            #CC0C1F;   /* brand-primary — red CTA/accent */
  --teal-secondary:  #E65328;   /* hover state */
  --teal-subtle:     rgba(204,12,31,0.08);
  --teal-soft:       rgba(204,12,31,0.15);
  --teal-strong:     rgba(204,12,31,0.25);
  --teal-glow:       rgba(204,12,31,0.12);

  /* ---- Brand: --sky → DataRipple accent blue ---- */
  --sky:             #5189AD;
  --sky-dark:        #3F6E90;
  --sky-light:       #6DA0C0;

  /* ---- Brand: --orange → DataRipple brand orange ---- */
  --orange:          #E65328;
  --orange-light:    #F07040;
  --orange-dark:     #C94420;
  --orange-glow:     rgba(230,83,40,0.18);

  /* ---- Semantic status ---- */
  --success:         #166534;
  --success-soft:    rgba(22,101,52,0.10);
  --success-strong:  rgba(22,101,52,0.25);
  --warning:         #854D0E;
  --warning-soft:    rgba(133,77,14,0.10);
  --warning-strong:  rgba(133,77,14,0.25);
  --danger:          #991B1B;
  --danger-soft:     rgba(153,27,27,0.10);
  --danger-strong:   rgba(153,27,27,0.25);
  --violet:          #5189AD;   /* --brand-accent per style guide */
  --violet-soft:     rgba(81,137,173,0.12);

  /* ---- Data-visualization palette (charts, avatars, project-phase & health
     scales). Centralized from the rollup/dashboard controllers so the viz
     colors are consistent and design-system-visible. Values are unchanged. ---- */
  --viz-teal:        #1198BB;   /* strong / healthy */
  --viz-teal-ink:    #0E6E88;   /* strong-health text on soft bg */
  --viz-blue:        #2D7FF9;
  --viz-blue-mid:    #2D6FA8;
  --viz-blue-soft:   #8FC7E8;
  --viz-slate:       #3E7CB1;
  --viz-orange:      #E65328;
  --viz-orange-deep: #E2603B;
  --viz-amber:       #D9A441;   /* estimate / watch */
  --viz-amber-warm:  #E59A45;
  --viz-amber-ink:   #8A5A0B;   /* health-warn text */
  --viz-amber-bg:    #FCF4E5;   /* health-warn soft bg */
  --viz-purple:      #6D3BD1;
  --viz-cyan:        #0ABFBC;
  --viz-pink:        #E0457B;
  --viz-green:       #3FA35B;   /* complete / done */
  --viz-grey:        #8E9BAD;   /* lead (rollup) */
  --viz-grey-cool:   #9AA5B1;   /* lead (dashboard) */
  --viz-grey-muted:  #7A869A;   /* default phase */

  /* ---- Template Library document/letter preview. These mimic a printed
     document (paper, ink, merge-field highlight) — mock CONTENT, not app UI
     chrome — centralized so the preview palette is consistent. ---- */
  --doc-paper:       #F5F5F5;   /* document thumbnail paper */
  --doc-ink:         #242424;   /* document body / title text */
  --doc-ink-strong:  #0A0A0A;   /* letterhead name */
  --doc-ink-soft:    #555555;   /* letterhead meta */
  --doc-rule:        #C4C4C4;   /* placeholder lines */
  --doc-field-bg:    #FEF3C7;   /* merge-field highlight */
  --doc-field-line:  #B8860B;   /* merge-field underline */
  --doc-field-ink:   #6B4F00;   /* merge-field text */

  /* ---- Transparency ladders (now on light, so ladders use ink not white) ---- */
  --surface-1:       rgba(11,18,32,0.02);
  --surface-2:       rgba(11,18,32,0.04);
  --surface-3:       rgba(11,18,32,0.06);
  --scrim:           rgba(11,18,32,0.50);
  --scrim-soft:      rgba(11,18,32,0.32);

  /* ---- Gradients ---- */
  --grad-cta:        linear-gradient(135deg, #CC0C1F 0%, #A80917 100%);
  --grad-cta-hover:  linear-gradient(135deg, #E65328 0%, #CC0C1F 100%);
  --grad-orange:     linear-gradient(133deg, #E65328, #C94420);
  --grad-ripple:     linear-gradient(135deg, #1B2433 0%, #2F3C4E 100%);

  /* ---- Radius (from DataRipple design tokens — tighter, more rectilinear) ---- */
  --radius-sm:       3px;        /* button, input */
  --radius-md:       6px;        /* card */
  --radius-lg:       10px;
  --radius-xl:       16px;
  --radius-subtle:   2px;
  --radius-pill:     25px;
  --radius-full:     9999px;
  --radius-button:   3px;
  --radius-card:     6px;
  --radius-input:    3px;
  --radius-tag:      25px;
  --radius-badge:    9999px;
  --radius-avatar:   9999px;

  /* ---- Elevation (softer shadows for light surfaces) ---- */
  --shadow-sm:       0px 2px 6px rgba(0,0,0,0.06), 0px 1px 3px rgba(0,0,0,0.04);
  --shadow-md:       0px 4px 14px rgba(0,0,0,0.09), 0px 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:       rgba(0,0,0,0.20) 2px 8px 23px 3px;
  --shadow-accent:   rgb(122,84,216) 0px 0px 6px 0px;
  --shadow-glow:     0px 0px 24px rgba(15,30,80,0.32);
  --shadow-dark:     0px 8px 32px rgba(11,18,32,0.4);
  --shadow-cta:      0 4px 12px rgba(15,30,80,0.30);
  --shadow-cta-h:    0 6px 18px rgba(15,30,80,0.45);
  --focus-ring:      0 0 0 3px rgba(81,137,173,0.30);
  --shadow-accent-soft:  0 0 0 1px rgba(81,137,173,0.20);
  --shadow-accent-ring:  0 0 0 3px rgba(81,137,173,0.18);
  --shadow-accent-inset: inset 0 0 0 1px rgba(81,137,173,0.35);

  /* ---- Spacing scale (6px-base per DataRipple tokens; --space-12 preserved
         from classic for any consumer that referenced the old 4px-base 48px slot) ---- */
  --space-1:  6px;
  --space-2:  12px;
  --space-3:  18px;
  --space-4:  24px;
  --space-5:  30px;
  --space-6:  36px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-12: 48px;   /* classic-only; preserved so consumers don't regress */

  /* ---- Z-index scale ---- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    600;
  --z-tooltip:  800;

  /* ---- Transitions ---- */
  --transition-fast:   0.1s ease;
  --transition-base:   0.15s ease;
  --transition-slow:   0.25s ease;

  /* ---- Typography: Ubuntu — DataRipple brand font ---- */
  --font-heading:    "Ubuntu", system-ui, -apple-system, sans-serif;
  --font-display:    "Ubuntu", system-ui, -apple-system, sans-serif;
  --font-body:       "Ubuntu", system-ui, -apple-system, sans-serif;
  --font-ui:         "Ubuntu", system-ui, -apple-system, sans-serif;
  --font-mono:       "Ubuntu Mono", "SF Mono", "Fira Code", ui-monospace, monospace;

  /* ---- Typography: DataRipple type scale ---- */
  --fs-display:      54.4px;   /* hero headlines */
  --fs-h1:           43.2px;   /* page titles */
  --fs-h2:           38.4px;   /* section headings */
  --fs-h3:           28px;     /* sub-headings */
  --fs-h4:           20px;     /* card titles, callouts */
  --fs-h5:           17px;     /* small headings */
  --fs-hero:         42px;
  /* — classic-preserved smaller type sizes (consumers in app.css still ref these) — */
  --fs-body:         14px;
  --fs-body-sm:      13px;
  --fs-meta:         12px;
  --fs-label:        11px;
  --fs-code:         13px;

  /* ---- Line-height tokens (DataRipple display/heading/body + classic per-role) ---- */
  --lh-display:      1.08;
  --lh-heading:      1.15;
  --lh-body:         1.6;
  --lh-h1:           42px;
  --lh-h2:           22px;
  --lh-h3:           20px;
  --lh-body-sm:      20px;
  --lh-meta:         18px;
  --lh-label:        16px;
  --lh-code:         20px;
  --lh-hero:         50px;

  /* ---- Letter-spacing tokens ---- */
  --tracking-heading: -0.025em;
  --tracking-label:   0.2em;
  --tracking-wide:    0.15em;

  /* ---- Font weights ---- */
  --fw-body:         500;   /* DataRipple body weight is Ubuntu Medium */
  --fw-heading:      700;
  --fw-h1:           700;
  --fw-h2:           700;
  --fw-h3:           500;
  --fw-label:        700;

  /* ---- Accent aliases (used by component CSS) ---- */
  --accent:          #CC0C1F;
  --accent-2:        #E65328;
}

:root[data-theme="light"] {
  --bg:              #f5f7fb;
  --bg-1:            #ffffff;   /* lightest — used as pressed-button text (on teal) + base bg */
  --bg-2:            #eef3f8;
  --bg-3:            #e7edf5;   /* chip / hover bg in light mode */
  --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;
}