/* ============================================================
   Cync Design System — component stylesheet (loaded after tokens.css)
   Holds what tokens.json cannot: values built with color-mix() or
   var(), motion, the accent and scene ramps, and the base element
   defaults. Every other token lives in tokens.json.
   ============================================================ */

/* ---------- from tokens/colors.css: color-mix and var() aliases ---------- */
:root {
  --surface-brand-soft: var(--blue-50);

  --text-brand:     var(--blue-600);
  --text-link:      var(--blue-600);

  --brand-ring:     color-mix(in srgb, var(--blue-500) 28%, transparent);

  /* accent-derived surfaces — computed from --brand so they adapt to a
     personalized accent AND to dark mode without per-accent overrides */
  --accent-soft:        color-mix(in srgb, var(--brand) 9%,  var(--surface-card));
  --accent-soft-strong: color-mix(in srgb, var(--brand) 16%, var(--surface-card));
  --accent-soft-border: color-mix(in srgb, var(--brand) 24%, var(--surface-card));
  --accent-spark:       color-mix(in srgb, var(--brand) 32%, var(--surface-card));
  --accent-text:        var(--text-brand);

  /* "magic" AI gradient — blends the themeable accent with violet so it
     adapts to a personalized accent and to dark mode */
  --magic-grad:  linear-gradient(120deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 45%, var(--violet-500)) 58%, var(--violet-500) 100%);
  --magic-glow:  color-mix(in srgb, var(--violet-500) 50%, var(--brand));

  /* status — fg / bg / border triplets. Locked Aug 2026: bg = the matching stage-pill
     tint mixed to a 40% wash, border = the base hue at 38%, and alert TEXT sets the
     whole message in the status fg ink. */
  --status-success-fg:     var(--green-700);
  --status-success-bg:     color-mix(in srgb, #D2EDD7 40%, var(--surface-card));
  --status-success-border: color-mix(in srgb, #34C759 38%, var(--surface-card));

  --status-warning-fg:     var(--amber-700);
  --status-warning-bg:     color-mix(in srgb, #F7E4C6 40%, var(--surface-card));
  --status-warning-border: color-mix(in srgb, #FF9F0A 38%, var(--surface-card));

  --status-danger-fg:      var(--red-700);
  --status-danger-bg:      color-mix(in srgb, #F7D8D6 40%, var(--surface-card));
  --status-danger-border:  color-mix(in srgb, #FF453A 38%, var(--surface-card));

  --status-info-fg:        #005FCA; /* pill ink — blue ramp itself is locked brand territory */
  --status-info-bg:        color-mix(in srgb, #D0E2F7 40%, var(--surface-card));
  --status-info-border:    color-mix(in srgb, #0A84FF 38%, var(--surface-card));

  --status-neutral-bg:     color-mix(in srgb, #DDE1E7 40%, var(--surface-card));
  --status-neutral-border: color-mix(in srgb, #9AA7B8 55%, var(--surface-card));

  /* self-reported / unverified signal (dashed-violet convention) */
  --selfreport-fg:     var(--violet-700);
  --selfreport-bg:     var(--violet-50);
  --selfreport-border: var(--violet-200);
}

/* ---------- from tokens/spacing.css: rings and motion ---------- */
:root {
  /* inner hairline used on inputs for crisp 1px edge on retina */
  --ring-inset: inset 0 0 0 1px var(--border-subtle);

  /* focus ring */
  --focus-ring: 0 0 0 3px var(--brand-ring);
  --focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--red-500) 28%, transparent);

  /* ---------- motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    320ms;
}

/* ---------- from tokens/typography.css: tabular numerals and role aliases ---------- */
:root {
  /* tabular numerals — apply on any numeric column / metric */
  --num-tabular: "tnum" 1, "lnum" 1, "cv01" 1;

  /* semantic role aliases */
  --type-display-size:   var(--text-4xl);
  --type-display-weight: var(--weight-semibold);
  --type-display-tracking: var(--tracking-tighter);

  --type-h1-size:   var(--text-2xl);
  --type-h1-weight: var(--weight-semibold);
  --type-h2-size:   var(--text-xl);
  --type-h2-weight: var(--weight-semibold);
  --type-h3-size:   var(--text-lg);
  --type-h3-weight: var(--weight-semibold);

  --type-body-size:   var(--text-md);
  --type-body-weight: var(--weight-regular);

  --type-label-size:   var(--text-md);
  --type-label-weight: var(--weight-medium);

  --type-eyebrow-size:     var(--text-2xs);
  --type-eyebrow-weight:   var(--weight-semibold);
  --type-eyebrow-tracking: var(--tracking-caps);
}

/* ---------- from tokens/themes.css: dark values built with color-mix ---------- */
[data-theme="dark"] {
  --surface-brand-soft: var(--accent-soft);

  --text-brand:     color-mix(in srgb, var(--brand) 62%, white);
  --text-link:      color-mix(in srgb, var(--brand) 62%, white);

  /* accent text on dark needs lifting for legibility */
  --accent-text:    color-mix(in srgb, var(--brand) 64%, white);

  /* status — translucent dark tints, lifted foregrounds */
  --status-success-fg:     color-mix(in srgb, var(--green-500) 52%, white);
  --status-success-bg:     color-mix(in srgb, var(--green-500) 15%, var(--surface-card));
  --status-success-border: color-mix(in srgb, var(--green-500) 30%, var(--surface-card));

  --status-warning-fg:     color-mix(in srgb, var(--amber-500) 56%, white);
  --status-warning-bg:     color-mix(in srgb, var(--amber-500) 15%, var(--surface-card));
  --status-warning-border: color-mix(in srgb, var(--amber-500) 30%, var(--surface-card));

  --status-danger-fg:      color-mix(in srgb, var(--red-500) 54%, white);
  --status-danger-bg:      color-mix(in srgb, var(--red-500) 15%, var(--surface-card));
  --status-danger-border:  color-mix(in srgb, var(--red-500) 30%, var(--surface-card));

  --status-info-fg:        color-mix(in srgb, var(--brand) 60%, white);
  --status-info-bg:        var(--accent-soft);
  --status-info-border:    var(--accent-soft-border);

  --status-neutral-bg:     var(--surface-hover);
  --status-neutral-border: var(--border-default);

  /* self-reported (violet) */
  --selfreport-fg:     color-mix(in srgb, var(--violet-500) 58%, white);
  --selfreport-bg:     color-mix(in srgb, var(--violet-500) 16%, var(--surface-card));
  --selfreport-border: color-mix(in srgb, var(--violet-500) 36%, var(--surface-card));
}

/* ---------------------------------------------------------------
   ACCENT RAMPS
   Each overrides the blue ramp; --brand and all accent-derived
   tokens (which reference --blue-*) recompute. Default (no attr or
   data-accent="blue") keeps the clinical-blue ramp from tokens.json.
   --------------------------------------------------------------- */

/* Indigo */
[data-accent="indigo"] {
  --blue-50:  #F0F0FE; --blue-100: #E2E2FD; --blue-200: #C9C9FA; --blue-300: #A9A8F5;
  --blue-400: #7D71FA; --blue-500: #5B4CF5; --blue-600: #4633E8; --blue-700: #3726C7;
  --blue-800: #2C1FA3; --blue-900: #251B84;
}

/* Pink (deepened for button contrast) */
[data-accent="pink"] {
  --blue-50:  #FFF0F3; --blue-100: #FFDFE6; --blue-200: #FFC2CF; --blue-300: #FF94AC;
  --blue-400: #FB5C86; --blue-500: #F73267; --blue-600: #EB0F53; --blue-700: #C40A43;
  --blue-800: #9C0736; --blue-900: #7F052D;
}

/* Mint (deepened for button contrast) */
[data-accent="mint"] {
  --blue-50:  #E9FBF9; --blue-100: #CDF5F1; --blue-200: #9BEAE2; --blue-300: #62D9CE;
  --blue-400: #16D3C4; --blue-500: #00BFB0; --blue-600: #00A396; --blue-700: #00857A;
  --blue-800: #006B62; --blue-900: #005850;
}

/* Amber (deepened for button contrast) */
[data-accent="amber"] {
  --blue-50:  #FFF7E8; --blue-100: #FFEDCC; --blue-200: #FFDD99; --blue-300: #FFC661;
  --blue-400: #FFAC26; --blue-500: #FF9500; --blue-600: #F27A00; --blue-700: #C75F00;
  --blue-800: #9E4C00; --blue-900: #813E00;
}

/* ---------------------------------------------------------------
   BACKGROUND SCENES
   Each scene overrides the blue ramp (its matching accent) AND paints
   a soft background wash on the app surface. Scenes are mutually
   exclusive with data-accent (the app sets only one attribute).
   NOTE: washes are token-driven gradients — drop in real photographic
   backgrounds per scene at build time by overriding --scene-bg.
   --------------------------------------------------------------- */

/* Mountains — teal (uses photo background, see kit shell.css) */
[data-scene="mountains"] {
  --blue-50:#ECFAFC; --blue-100:#D0F2F7; --blue-200:#A6E5EE; --blue-300:#74D4E2; --blue-400:#40C2D4;
  --blue-500:#17A9BE; --blue-600:#0D93A8; --blue-700:#0A7789; --blue-800:#086070; --blue-900:#084F5C;
}
/* Sunrise — indigo (uses photo background, see kit shell.css) */
[data-scene="sunrise"] {
  --blue-50:#F0F0FE; --blue-100:#E2E2FD; --blue-200:#C9C9FA; --blue-300:#A9A8F5; --blue-400:#8280EE;
  --blue-500:#5E5CE6; --blue-600:#4B48C9; --blue-700:#3C39A8; --blue-800:#302E87; --blue-900:#28276E;
}
/* Ocean — cool blue (uses photo background, see kit shell.css) */
[data-scene="ocean"] {
  --blue-50:#F0F7FF; --blue-100:#DEEEFF; --blue-200:#BBDDFF; --blue-300:#8AC5FF; --blue-400:#2E8CF8;
  --blue-500:#0A74F0; --blue-600:#005CDE; --blue-700:#0047C2; --blue-800:#003BA1; --blue-900:#063383;
}
/* Autumn — burnt orange (uses photo background, see kit shell.css) */
[data-scene="autumn"] {
  --blue-50:#FFF3EC; --blue-100:#FFE4D1; --blue-200:#FFC9A3; --blue-300:#FFA76B; --blue-400:#FF8440;
  --blue-500:#F96A16; --blue-600:#E05206; --blue-700:#B54005; --blue-800:#8F3407; --blue-900:#752B08;
}
/* Snow — cool sky blue (uses photo background, see kit shell.css) */
[data-scene="snow"] {
  --blue-50:#F0FAFF; --blue-100:#DCF3FF; --blue-200:#B8E7FF; --blue-300:#85D5FF; --blue-400:#4FBEFA;
  --blue-500:#21A2ED; --blue-600:#0E86D4; --blue-700:#0C6BAD; --blue-800:#0D588D; --blue-900:#0E4971;
}

/* the wash — derived from the active scene's ramp, so it auto-matches */
[data-scene] {
  --scene-bg: linear-gradient(180deg, var(--blue-100) 0%, color-mix(in srgb, var(--blue-50) 55%, var(--surface-page)) 26%, var(--surface-page) 60%);
}
[data-theme="warm"][data-scene] {
  --scene-bg: linear-gradient(180deg, color-mix(in srgb, var(--blue-100) 70%, var(--surface-page)) 0%, color-mix(in srgb, var(--blue-50) 40%, var(--surface-page)) 26%, var(--surface-page) 60%);
}
[data-theme="dark"][data-scene] {
  --scene-bg: linear-gradient(180deg, color-mix(in srgb, var(--blue-800) 55%, var(--surface-page)) 0%, color-mix(in srgb, var(--blue-900) 35%, var(--surface-page)) 26%, var(--surface-page) 62%);
}

/* ============================================================
   from tokens/base.css — base element defaults & helpers
   Light reset + sensible document defaults so specimen cards and
   UI kits render consistently. App components remain self-contained.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  font-feature-settings: "cv01" 1, "ss01" 1;
}

/* numeric / data utility — tabular, mono, tight */
.lb-num {
  font-family: var(--font-mono);
  font-feature-settings: var(--num-tabular);
  letter-spacing: var(--tracking-tight);
}

/* uppercase eyebrow / table header utility */
.lb-eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Website copy: the design system's thin custom scrollbars are turned off here so every
   site page uses the browser's regular scrollbar (matches the Claude Design pages).
* {
  scrollbar-width: thin;
  scrollbar-color: var(--slate-300) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--slate-400); background-clip: padding-box; }
*/