/**
 * @dynamotechtvt/brand — CSS custom properties (tokens)
 *
 * Linkable without a bundler:
 *   <link rel="stylesheet" href="node_modules/@dynamotechtvt/brand/css/tokens.css">
 *
 * Or via package exports:
 *   import '@dynamotechtvt/brand/tokens.css';
 *
 * Everything is wrapped in `@layer base { ... }` so a consumer that imports
 * this file plainly (no `layer(base)` needed) still has its own un-layered
 * `:root` win by cascade order. Repos that already define their own theme
 * just override these baselines.
 *
 * Includes:
 *  - Primitives (hex): --dynamo-navy/-purple/-periwinkle/-sky/-gray + scale
 *    --dynamo-50 … --dynamo-950.
 *  - shadcn semantic tokens as HSL TRIPLETS (e.g. `--primary: 268 69% 37%`)
 *    so `hsl(var(--primary))` works out of the box. Light in `:root`,
 *    dark in `.dark, [data-theme="dark"]`.
 */

@layer base {
  :root {
    /* ----------------------------------------------------------------
       Primitives — org palette (hex)
       ---------------------------------------------------------------- */
    --dynamo-navy:       #110B88;
    --dynamo-purple:     #481D9F;
    --dynamo-periwinkle: #7770EC;
    --dynamo-sky:        #8DC9FA;
    --dynamo-gray:       #E6E6E6;

    /* Color scale — 50..950 (periwinkle/purple anchored) */
    --dynamo-50:  #F0EFFF;
    --dynamo-100: #D4D2FA;
    --dynamo-200: #A5A0F4;
    --dynamo-300: #7770EC;
    --dynamo-400: #5040D4;
    --dynamo-500: #481D9F;
    --dynamo-600: #3A1680;
    --dynamo-700: #2D1068;
    --dynamo-800: #110B88;
    --dynamo-900: #0A0750;
    --dynamo-950: #050330;

    /* ----------------------------------------------------------------
       Semantic shadcn tokens — LIGHT (HSL triplets)
       Consume as: hsl(var(--primary))
       ---------------------------------------------------------------- */
    --background:             0 0% 96.5%;
    --foreground:             243 84% 10%;

    --card:                   0 0% 100%;
    --card-foreground:        243 84% 10%;

    --popover:                0 0% 100%;
    --popover-foreground:     243 84% 10%;

    --primary:                268 69% 37%;   /* #481D9F */
    --primary-foreground:     0 0% 100%;

    --secondary:              243 40% 96%;
    --secondary-foreground:   243 84% 29%;

    --muted:                  243 20% 94%;
    --muted-foreground:       243 15% 46%;

    --accent:                 243 40% 94%;
    --accent-foreground:      243 84% 29%;

    --destructive:            0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border:                 243 20% 88%;
    --input:                  243 20% 88%;
    --ring:                   268 69% 37%;   /* #481D9F */

    --radius:                 0.5rem;

    --sidebar-background:         0 0% 100%;
    --sidebar-foreground:         243 30% 30%;
    --sidebar-primary:            268 69% 37%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent:             243 40% 96%;
    --sidebar-accent-foreground:  243 84% 29%;
    --sidebar-border:             243 20% 91%;
    --sidebar-ring:               268 69% 37%;
  }

  /* ------------------------------------------------------------------
     Semantic shadcn tokens — DARK (HSL triplets)
     Activate via class `.dark` (Tailwind darkMode: ["class"]) OR
     attribute [data-theme="dark"]. Both selectors are covered.
     ------------------------------------------------------------------ */
  .dark,
  [data-theme="dark"] {
    --background:             0 0% 6%;
    --foreground:             0 0% 96%;

    --card:                   0 0% 9%;
    --card-foreground:        0 0% 96%;

    --popover:                0 0% 9%;
    --popover-foreground:     0 0% 96%;

    --primary:                243 78% 72%;
    --primary-foreground:     0 0% 8%;

    --secondary:              0 0% 14%;
    --secondary-foreground:   0 0% 96%;

    --muted:                  0 0% 14%;
    --muted-foreground:       0 0% 64%;

    --accent:                 0 0% 16%;
    --accent-foreground:      0 0% 96%;

    --destructive:            0 62.8% 45%;
    --destructive-foreground: 0 0% 98%;

    --border:                 0 0% 18%;
    --input:                  0 0% 18%;
    --ring:                   243 78% 72%;

    --sidebar-background:         0 0% 4%;
    --sidebar-foreground:         0 0% 88%;
    --sidebar-primary:            243 78% 72%;
    --sidebar-primary-foreground: 0 0% 8%;
    --sidebar-accent:             0 0% 13%;
    --sidebar-accent-foreground:  0 0% 96%;
    --sidebar-border:             0 0% 13%;
    --sidebar-ring:               243 78% 72%;
  }
}