/* GENERATED FROM registry/. DO NOT EDIT DIRECTLY. Source: registry/tokens.css. */
/* ==========================================================================
   Cloaked Design System 4.0 — Colors & Typography
   Canonical registry token source. Edit this file, then run
   `npm run generate`.
   ========================================================================== */

/* ----- Fonts ---------------------------------------------------------- */

/* STK Bureau Sans — Dashboard & Brand workhorse */
@font-face { font-family: "STK Bureau Sans"; font-weight: 300; font-style: normal;
  src: url("./fonts/STKBureauSans-Book.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "STK Bureau Sans"; font-weight: 400; font-style: normal;
  src: url("./fonts/STKBureauSans-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "STK Bureau Sans"; font-weight: 500; font-style: normal;
  src: url("./fonts/STKBureauSans-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "STK Bureau Sans"; font-weight: 600; font-style: normal;
  src: url("./fonts/STKBureauSans-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "STK Bureau Sans"; font-weight: 700; font-style: normal;
  src: url("./fonts/STKBureauSans-Bold.ttf") format("truetype"); font-display: swap; }

/* Simula — Editorial serif for marketing */
@font-face { font-family: "Simula"; font-weight: 400; font-style: normal;
  src: url("./fonts/Simula-Book.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Simula"; font-weight: 400; font-style: italic;
  src: url("./fonts/Simula-Italic.otf") format("opentype"); font-display: swap; }

/* Roboto — Android */
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal;
  src: url("./fonts/Roboto-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal;
  src: url("./fonts/Roboto-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 600; font-style: normal;
  src: url("./fonts/Roboto-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal;
  src: url("./fonts/Roboto-Bold.ttf") format("truetype"); font-display: swap; }

:root {
  /* ======================================================================
     FONT FAMILIES
     One face per surface. iOS uses the system stack; everything else
     ships its own file.
     ====================================================================== */
  --font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --font-android: "Roboto", system-ui, sans-serif;
  --font-dashboard: "STK Bureau Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-brand: "STK Bureau Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: "Simula", "Iowan Old Style", Georgia, serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ======================================================================
     COLOR PRIMITIVES — Neutrals
     21-step neutral ramp. Use semantic tokens below; only reach into
     primitives when the semantic layer genuinely can't cover a case.
     ====================================================================== */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F2F2F2;
  --neutral-100:  #E5E5E5;
  --neutral-150:  #D9D9D9;
  --neutral-200:  #CCCCCC;
  --neutral-250:  #BFBFBF;
  --neutral-300:  #B3B3B3;
  --neutral-350:  #A6A6A6;
  --neutral-400:  #999999;
  --neutral-450:  #8C8C8C;
  --neutral-500:  #808080;
  --neutral-550:  #737373;
  --neutral-600:  #666666;
  --neutral-650:  #595959;
  --neutral-700:  #4C4C4C;
  --neutral-750:  #404040;
  --neutral-800:  #333333;
  --neutral-850:  #262626;
  --neutral-900:  #1A1A1A;
  --neutral-950:  #0D0D0D;
  --neutral-1000: #000000;

  /* ======================================================================
     COLOR PRIMITIVES — Brand & Accents
     Cloaked has FOUR named color tracks, each with 3-4 tints.
     ====================================================================== */

  /* Brand — Iris (the main brand hue, used for informational accents) */
  --brand-100: #D0D8FF;
  --brand-200: #A9B7FF;
  --brand-300: #8196FF;  /* base */
  --brand-400: #5A76FF;

  /* Accent — Lavender (secondary brand tint; avatars, highlights) */
  --lavender-100: #DCD0FF;
  --lavender-200: #BEA9FF;  /* base */
  --lavender-300: #9747FF;
  --lavender-deep: #2B166C;

  /* Signal — Firey Orange (primary CTA / alerts / key moments) */
  --firey-100: #FCE1C7;
  --firey-200: #F9C998;
  --firey-300: #F7B06A;
  --firey-500: #FF550C;  /* the primary brand CTA */
  --firey-deep: #F27F0D;

  /* Info — Azure */
  --azure-100: #D0D8FF;
  --azure-400: #2DA9FF;  /* base */
  --azure-500: #2A9AE8;
  --azure-600: #30A2F2;

  /* Semantic — Success (green) */
  --success-100: #C4E7D0;
  --success-400: #93D4A9;
  --success-500: #009933;
  --success-600: #31AD5A;

  /* Semantic — Danger (red) */
  --danger-100: #EDAEAE;
  --danger-400: #F36669;
  --danger-500: #EC4545;
  --danger-600: #C53535;
  --danger-700: #F24141;

  /* Semantic — Warning (orange — distinct from Firey) */
  --warning-100: #FCE1C7;
  --warning-400: #F9C998;
  --warning-500: #F27F0D;

  /* ======================================================================
     SEMANTIC TOKENS — Light mode (default)
     These are what you use in components. They remap under
     `[data-theme="dark"]` below; rename the primitive, not these.
     Source of truth: Figma /Color/Color-Variables.
     ====================================================================== */

  /* Surfaces — the stack of paper you build on */
  --bg-canvas:       #FFFFFF;  /* app background, dashboard */
  --bg-cream:        #F3F0E6;  /* iOS warm background */
  --bg-subtle:       #F7F7F7;  /* secondary surface (cards on canvas) */
  --bg-muted:        #F2F2F2;  /* tertiary surface, wells */
  --bg-inverse:      #000000;  /* dark CTA, tooltips */
  --bg-scrim:        rgba(0, 0, 0, 0.5);
  --bg-overlay-soft: rgba(0, 0, 0, 0.05);
  --bg-overlay-med:  rgba(0, 0, 0, 0.1);

  /* Foreground */
  --fg-default:      #000000;  /* primary text */
  --fg-strong:       #1A1A1A;  /* headings */
  --fg-muted:        #262626;  /* body */
  --fg-subtle:       #595959;  /* captions */
  --fg-disabled:     #8C8C8C;
  --fg-placeholder:  #A6A6A6;
  --fg-inverse:      #FFFFFF;
  --fg-link:         #5A76FF;

  /* Borders */
  --border-default:  #E5E5E5;
  --border-strong:   #CCCCCC;
  --border-subtle:   #F2F2F2;
  --border-focus:    #5A76FF;

  /* Accent roles */
  --accent-primary:       #FF550C;  /* Firey — the "do it" color */
  --accent-primary-hover: #F05410;
  --accent-primary-press: #D94A0A;
  --accent-primary-fg:    #FFFFFF;
  --accent-secondary:     #000000;  /* Black — the "confirm" color */
  --accent-secondary-fg:  #FFFFFF;

  /* State */
  --state-success:  #009933;
  --state-success-bg: rgba(0, 153, 51, 0.1);
  --state-danger:   #EC4545;
  --state-danger-bg: rgba(236, 69, 69, 0.1);
  --state-warning:  #F27F0D;
  --state-warning-bg: rgba(242, 127, 13, 0.1);
  --state-info:     #2DA9FF;
  --state-info-bg:  rgba(45, 169, 255, 0.1);
}

/* ==========================================================================
   DARK THEME
   Same primitives, inverted semantics. Triggered by either:
     <html data-theme="dark">   — explicit opt-in
     @media (prefers-color-scheme: dark) with <html data-theme="auto">
   Default is light; no media override unless you opt in.
   Source of truth: Figma /Color/Color-Variables [SECTION]--Dark.
   ========================================================================== */
:root[data-theme="dark"] {
  /* Surfaces: black base with 5% white overlays for raised layers */
  --bg-canvas:       #000000;
  --bg-cream:        #0D0D0D;          /* warm cream → near-black in dark */
  --bg-subtle:       #1A1A1A;
  --bg-muted:        #262626;
  --bg-inverse:      #FFFFFF;
  --bg-scrim:        rgba(0, 0, 0, 0.7);
  --bg-overlay-soft: rgba(255, 255, 255, 0.05);
  --bg-overlay-med:  rgba(255, 255, 255, 0.1);

  /* Foreground inverts */
  --fg-default:      #FFFFFF;
  --fg-strong:       #FFFFFF;
  --fg-muted:        #E5E5E5;
  --fg-subtle:       #A6A6A6;
  --fg-disabled:     #595959;
  --fg-placeholder:  #737373;
  --fg-inverse:      #000000;
  --fg-link:         #8196FF;          /* iris-300, brighter for dark */

  /* Borders: white-over-black instead of black-on-white */
  --border-default:  #333333;
  --border-strong:   #4C4C4C;
  --border-subtle:   #1F1F1F;
  --border-focus:    #8196FF;

  /* Accents: Firey stays, its press state darkens less on dark BG */
  --accent-primary:       #FF550C;
  --accent-primary-hover: #FF6A2B;
  --accent-primary-press: #E6490A;
  --accent-primary-fg:    #FFFFFF;
  --accent-secondary:     #FFFFFF;     /* inverted — white is the "confirm" */
  --accent-secondary-fg:  #000000;

  /* State colors brighten a step; backgrounds lift to 20% alpha */
  --state-success:     #31AD5A;
  --state-success-bg:  rgba(49, 173, 90, 0.2);
  --state-danger:      #F36669;
  --state-danger-bg:   rgba(238, 85, 85, 0.2);
  --state-warning:     #F49834;
  --state-warning-bg:  rgba(244, 152, 59, 0.2);
  --state-info:        #30A2F2;        /* Figma dark Blue */
  --state-info-bg:     rgba(48, 162, 242, 0.2);

  /* Shadows are effectively invisible on #000; replace w/ subtle white haloes */
  --shadow-xs:  0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 5px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.8);
  --shadow-focus: 0 0 0 3px rgba(129, 150, 255, 0.4);
}

/* Opt-in auto mode: follow the OS when <html data-theme="auto"> */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-canvas: #000000; --bg-cream: #0D0D0D; --bg-subtle: #1A1A1A;
    --bg-muted: #262626; --bg-inverse: #FFFFFF;
    --bg-scrim: rgba(0,0,0,0.7);
    --bg-overlay-soft: rgba(255,255,255,0.05);
    --bg-overlay-med:  rgba(255,255,255,0.1);
    --fg-default: #FFFFFF; --fg-strong: #FFFFFF; --fg-muted: #E5E5E5;
    --fg-subtle: #A6A6A6; --fg-disabled: #595959; --fg-placeholder: #737373;
    --fg-inverse: #000000; --fg-link: #8196FF;
    --border-default: #333333; --border-strong: #4C4C4C;
    --border-subtle: #1F1F1F; --border-focus: #8196FF;
    --accent-primary-hover: #FF6A2B; --accent-primary-press: #E6490A;
    --accent-secondary: #FFFFFF; --accent-secondary-fg: #000000;
    --state-success: #31AD5A; --state-success-bg: rgba(49,173,90,0.2);
    --state-danger:  #F36669; --state-danger-bg:  rgba(238,85,85,0.2);
    --state-warning: #F49834; --state-warning-bg: rgba(244,152,59,0.2);
    --state-info:    #30A2F2; --state-info-bg:    rgba(48,162,242,0.2);
  }
}

/* The :root block below continues with universal (light+dark shared) tokens */
:root {

  /* ======================================================================
     CORNER RADIUS
     Cloaked leans on generous but not balloon-y corners. Cards get 16px;
     buttons are pill-shape (full) on mobile, 12px on desktop.
     ====================================================================== */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;   /* small buttons, chips */
  --radius-lg:   12px;  /* desktop buttons, form fields */
  --radius-xl:   16px;  /* cards */
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ======================================================================
     SHADOWS — "Soft weather" elevation
     Black at low alpha, larger blur than offset, no tint. Elevation is
     rare — only for menus, sheets, and the pill CTA hover lift.
     ====================================================================== */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 5px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(90, 118, 255, 0.25);

  /* ======================================================================
     SPACING — 4px grid
     ====================================================================== */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 120px;

  /* ======================================================================
     MOTION
     Cloaked motion is calm. 150-250ms, ease-out for most, spring only
     on sheet entry and the CTA press rebound.
     ====================================================================== */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ======================================================================
     SEMANTIC TYPOGRAPHY
     Use these instead of literals. `letter-spacing` is tight because
     STK Bureau Sans and SF Pro both look better that way.
     ====================================================================== */
  --display-xl:    700 72px/1.02 var(--font-brand);
  --display-lg:    700 56px/1.05 var(--font-brand);
  --display-md:    700 40px/1.1  var(--font-brand);

  --editorial-xl:  400 72px/1.05 var(--font-serif);
  --editorial-lg:  400 48px/1.1  var(--font-serif);
  --editorial-md:  400 32px/1.15 var(--font-serif);

  --h1:            700 34px/40px var(--font-brand);
  --h2:            700 28px/34px var(--font-brand);
  --h3:            600 22px/28px var(--font-brand);
  --h4:            600 18px/24px var(--font-brand);
  --h5:            600 16px/22px var(--font-brand);

  --body-lg:       400 18px/26px var(--font-brand);
  --body:          400 16px/22px var(--font-brand);
  --body-sm:       400 14px/20px var(--font-brand);
  --body-xs:       400 12px/16px var(--font-brand);

  --label-lg:      500 16px/20px var(--font-brand);
  --label:         500 14px/18px var(--font-brand);
  --label-sm:      500 12px/16px var(--font-brand);

  --caption:       400 12px/16px var(--font-brand);
  --overline:      600 11px/14px var(--font-brand);

  --mono-sm:       400 13px/18px var(--font-mono);
  --mono:          400 14px/20px var(--font-mono);

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.01em;
  --tracking-caps:   0.08em;
}

/* ==========================================================================
   Baseline element styles — opt in by adding `cds-prose` to a container.
   ========================================================================== */
.cds-prose { font: var(--body); color: var(--fg-muted); }
.cds-prose h1 { font: var(--h1); color: var(--fg-strong); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
.cds-prose h2 { font: var(--h2); color: var(--fg-strong); letter-spacing: var(--tracking-tight); margin: var(--space-8) 0 var(--space-3); }
.cds-prose h3 { font: var(--h3); color: var(--fg-strong); margin: var(--space-6) 0 var(--space-2); }
.cds-prose p  { margin: 0 0 var(--space-4); }
.cds-prose code { font: var(--mono-sm); background: var(--bg-muted); padding: 2px 6px; border-radius: var(--radius-xs); }