@layer tokens, base, layout, components, motion, graph, views;

/* ============================================================
   DCMS Portal — 01 tokens
   Amber on steel/slate. Light = airy steel, dark = deep slate.
   --accent      : amber stroke/glow hue (never body text on light)
   --accent-ink  : text-safe amber (>= 4.5:1 on its background)
   --on-accent   : near-black ink used ON amber fills (never white)
   ============================================================ */

@layer tokens {
  :root {
    color-scheme: light;

    /* -- colour: canvas + surfaces ------------------------------------ */
    --bg: #F3F5F8;
    --bg-glow: rgba(240, 138, 18, 0.05);
    --surface: #FFFFFF;
    --surface-2: #EAEEF3;
    --surface-3: #DFE5EC;
    --border: #DFE5EC;
    --border-strong: #C4CEDA;
    --sidebar-bg: #FFFFFF;

    /* -- colour: text -------------------------------------------------- */
    --text: #1C2733;
    --text-muted: #5B6B7C;
    --text-faint: #8A99A9;

    /* -- colour: amber accent ------------------------------------------ */
    --accent-from: #FFC44D;
    --accent-to: #F08A12;
    --accent: #F49D1D;
    --accent-ink: #8C5A00;
    --on-accent: #1A1206;
    --accent-soft: rgba(240, 138, 18, 0.12);
    --accent-ring: rgba(240, 138, 18, 0.22);
    --accent-border: rgba(240, 138, 18, 0.45);
    --selection: rgba(240, 138, 18, 0.24);

    /* -- colour: status ------------------------------------------------ */
    --success: #10B981;
    --success-ink: #0B7A50;
    --success-soft: rgba(16, 185, 129, 0.13);
    --danger: #E11D48;
    --danger-ink: #BE123C;
    --danger-soft: rgba(225, 29, 72, 0.10);
    --info: #0EA5E9;
    --info-ink: #0369A1;
    --info-soft: rgba(14, 165, 233, 0.12);

    /* -- colour: fixed-dark code block --------------------------------- */
    --code-bg: #10151C;
    --code-border: #26313E;
    --code-text: #D7E1EC;
    --code-muted: #9FB0C2;

    /* -- colour: veils ------------------------------------------------- */
    --overlay: rgba(15, 19, 24, 0.55);
    --shimmer-veil: rgba(243, 245, 248, 0.55);
    --shimmer-sheen: rgba(255, 255, 255, 0.85);

    /* -- shadows ------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07);
    --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.05);
    --shadow-lift: 0 12px 32px rgba(16, 24, 40, 0.16), 0 4px 10px rgba(16, 24, 40, 0.08);
    --shadow-glow: 0 6px 20px rgba(240, 138, 18, 0.35);
    --shadow-glow-soft: 0 0 24px rgba(240, 138, 18, 0.22);

    /* -- spacing ------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;

    /* -- type ---------------------------------------------------------- */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas,
      "Liberation Mono", monospace;
    --fs-2xs: 0.6875rem;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.625rem;
    --fs-hero: 3.5rem;

    /* -- radii --------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-input: 10px;
    --radius-card: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* -- z-index ------------------------------------------------------- */
    --z-nav: 30;
    --z-modal: 100;
    --z-toast: 120;
    --z-skip: 200;

    /* -- motion -------------------------------------------------------- */
    --dur-fast: 120ms;
    --dur-quick: 180ms;
    --dur-base: 300ms;
    --dur-slow: 600ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  }

  /* -- dark: deep slate ------------------------------------------------ */
  [data-theme="dark"] {
    color-scheme: dark;

    --bg: #0F1318;
    --bg-glow: rgba(240, 138, 18, 0.06);
    --surface: #161C24;
    --surface-2: #1D2530;
    --surface-3: #26303D;
    --border: #242E3A;
    --border-strong: #3B4856;
    --sidebar-bg: #121820;

    --text: #E4EAF1;
    --text-muted: #9DACBE;
    --text-faint: #6E7E90;

    --accent: #F5A623;
    --accent-ink: #FFC44D;
    --accent-soft: rgba(255, 196, 77, 0.13);
    --accent-ring: rgba(255, 196, 77, 0.2);
    --accent-border: rgba(255, 196, 77, 0.38);
    --selection: rgba(240, 138, 18, 0.35);

    --success-ink: #34D399;
    --success-soft: rgba(52, 211, 153, 0.14);
    --danger-ink: #FB7185;
    --danger-soft: rgba(251, 113, 133, 0.13);
    --info-ink: #38BDF8;
    --info-soft: rgba(56, 189, 248, 0.13);

    --code-bg: #0B1015;
    --code-border: #212C38;

    --overlay: rgba(4, 7, 11, 0.66);
    --shimmer-veil: rgba(15, 19, 24, 0.5);
    --shimmer-sheen: rgba(255, 255, 255, 0.07);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38), 0 2px 4px rgba(0, 0, 0, 0.28);
    --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 6px 22px rgba(240, 138, 18, 0.3);
    --shadow-glow-soft: 0 0 26px rgba(240, 138, 18, 0.2);
  }

  /* System preference: same dark overrides, scoped to data-theme="system" */
  @media (prefers-color-scheme: dark) {
    [data-theme="system"] {
      color-scheme: dark;

      --bg: #0F1318;
      --bg-glow: rgba(240, 138, 18, 0.06);
      --surface: #161C24;
      --surface-2: #1D2530;
      --surface-3: #26303D;
      --border: #242E3A;
      --border-strong: #3B4856;
      --sidebar-bg: #121820;

      --text: #E4EAF1;
      --text-muted: #9DACBE;
      --text-faint: #6E7E90;

      --accent: #F5A623;
      --accent-ink: #FFC44D;
      --accent-soft: rgba(255, 196, 77, 0.13);
      --accent-ring: rgba(255, 196, 77, 0.2);
      --accent-border: rgba(255, 196, 77, 0.38);
      --selection: rgba(240, 138, 18, 0.35);

      --success-ink: #34D399;
      --success-soft: rgba(52, 211, 153, 0.14);
      --danger-ink: #FB7185;
      --danger-soft: rgba(251, 113, 133, 0.13);
      --info-ink: #38BDF8;
      --info-soft: rgba(56, 189, 248, 0.13);

      --code-bg: #0B1015;
      --code-border: #212C38;

      --overlay: rgba(4, 7, 11, 0.66);
      --shimmer-veil: rgba(15, 19, 24, 0.5);
      --shimmer-sheen: rgba(255, 255, 255, 0.07);

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38), 0 2px 4px rgba(0, 0, 0, 0.28);
      --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
      --shadow-glow: 0 6px 22px rgba(240, 138, 18, 0.3);
      --shadow-glow-soft: 0 0 26px rgba(240, 138, 18, 0.2);
    }
  }
}