/* ==========================================================================
   Array HQ Design Tokens — MkDocs port of @powered-by-array/tokens
   Source: https://github.com/Powered-By-Array/arrayhq-design-system
           packages/tokens/src/{theme.css,tokens.json}
   Contract: packages/tokens/SEMANTIC_TOKEN_CONTRACT.md (v1.2.0)
   ==========================================================================

   Two layers:
     1. PRIMITIVES (`--color-{hue}-{step}`) — Figma Primitives/Color/* hex values
     2. SEMANTIC (`--color-semantic-*`)     — role-bound tokens; light values
                                              in :root, dark overrides in
                                              [data-md-color-scheme="array-dark"]

   Components and Material-bridge rules in `colors.css` bind to the SEMANTIC
   layer only — never to primitives directly (per the contract).
   ========================================================================== */

:root {

  /* ── Neutral ────────────────────────────────────────────────── */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #d9dadc;
  --color-neutral-200: #b8bcc0;
  --color-neutral-300: #999ea3;
  --color-neutral-400: #7a8188;
  --color-neutral-500: #5d656e;
  --color-neutral-600: #4b5158;
  --color-neutral-700: #393e43;
  --color-neutral-800: #282b2f;
  --color-neutral-850: #202225;
  --color-neutral-900: #181a1c;
  --color-neutral-950: #0e0f10;

  /* ── Purple ─────────────────────────────────────────────────── */
  --color-purple-50:  #f3f2ff;
  --color-purple-100: #dad7f7;
  --color-purple-200: #c2b9fb;
  --color-purple-300: #ab9afe;
  --color-purple-400: #9679ff;
  --color-purple-500: #8353ff;
  --color-purple-600: #6544c1;
  --color-purple-700: #483587;
  --color-purple-800: #2e2650;
  --color-purple-850: #211d2c;
  --color-purple-900: #17151f;
  --color-purple-950: #100f16;

  /* ── Blue (system brand) ────────────────────────────────────── */
  --color-blue-50:  #ecf2ff;
  --color-blue-100: #bcd6ff;
  --color-blue-200: #90b9ff;
  --color-blue-300: #6a9bff;
  --color-blue-400: #4b7dfc;
  --color-blue-500: #3462df;
  --color-blue-600: #244bb6;
  --color-blue-700: #1b3886;
  --color-blue-800: #162752;
  --color-blue-850: #141e38;
  --color-blue-900: #12161f;
  --color-blue-950: #0b0e16;

  /* ── Yellow (brand highlight) ───────────────────────────────── */
  --color-yellow-50:  #fffbe5;
  --color-yellow-100: #fbeecd;
  --color-yellow-200: #f5e1a9;
  --color-yellow-300: #f0d383;
  --color-yellow-400: #ebc557;
  --color-yellow-500: #edb200;
  --color-yellow-600: #b18c00;
  --color-yellow-700: #6f5803;
  --color-yellow-800: #443300;
  --color-yellow-900: #281e00;

  /* ── Green ──────────────────────────────────────────────────── */
  --color-green-50:  #eafff6;
  --color-green-100: #d2f7e6;
  --color-green-300: #8de6c0;
  --color-green-400: #62ddad;
  --color-green-500: #20d498;
  --color-green-600: #0da175;
  --color-green-700: #097151;

  /* ── Orange ─────────────────────────────────────────────────── */
  --color-orange-300: #ffa568;
  --color-orange-400: #ff8c42;
  --color-orange-500: #f57c00;

  /* ── Red ────────────────────────────────────────────────────── */
  --color-red-50:  #fff0ed;
  --color-red-300: #ff968e;
  --color-red-400: #ff736c;
  --color-red-500: #ff4749;
  --color-red-600: #c63436;
  --color-red-700: #8f2224;
  --color-red-800: #5c1113;

  /* ── Mocha (ink palette) ────────────────────────────────────── */
  --color-mocha-50:  #faf8f7;
  --color-mocha-100: #eeeae9;
  --color-mocha-200: #d9d3d1;
  --color-mocha-500: #77706e;
  --color-mocha-600: #5a5453;

  /* ── Surfaces (deep / navy) — dark chrome substrate ─────────── */
  --color-surface-deep-1: #080c16;  /* deepest anchor — sidebar/footer in dark */
  --color-surface-deep-2: #1c1f26;
  --color-surface-navy-0: #111822;
  --color-surface-navy-1: #1b232d;
  --color-surface-navy-2: #232c39;

  /* ── Paper (light/dark substrates) ──────────────────────────── */
  --color-paper-base:        #17151f;  /* dark base */
  --color-paper-01dp:        #1e1d25;
  --color-paper-light-base:  #f5f5f7;  /* light base */
  --color-paper-light-01dp:  #f0f0f2;
  --color-paper-light-02dp:  #eaeaec;

  /* ── Brand aliases ──────────────────────────────────────────── */
  --color-brand-dark-anchor:   var(--color-surface-deep-1);
  --color-brand-hero-blue:     var(--color-blue-500);
  --color-brand-accent-blue:   var(--color-blue-300);
  --color-brand-accent-green:  var(--color-green-500);
  --color-brand-hero-yellow:   var(--color-yellow-500);
  --color-brand-light-surface: var(--color-neutral-50);

  /* ──────────────────────────────────────────────────────────────
     SEMANTIC LAYER — light mode defaults
     Components and rules bind to these, never to primitives.
     ────────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --color-semantic-bg-base:     var(--color-neutral-50);
  --color-semantic-bg-raised:   #ffffff;
  --color-semantic-bg-overlay:  #ffffff;
  --color-semantic-bg-elevated: #ffffff;
  --color-semantic-bg-wash:     #f3f3f5;
  --color-semantic-bg-divider:  var(--color-neutral-100);

  /* Foregrounds */
  --color-semantic-fg-primary:   var(--color-neutral-900);
  --color-semantic-fg-secondary: var(--color-neutral-700);
  --color-semantic-fg-muted:     var(--color-neutral-500);
  --color-semantic-fg-on-brand:  var(--color-neutral-50);
  --color-semantic-fg-link:      var(--color-blue-500);

  /* Strokes */
  --color-semantic-stroke-default: var(--color-neutral-100);
  --color-semantic-stroke-strong:  var(--color-neutral-200);
  --color-semantic-stroke-focus:   var(--color-blue-500);

  /* Brand accents */
  --color-semantic-accent-brand-primary:   var(--color-blue-500);
  --color-semantic-accent-brand-dark:      var(--color-surface-deep-1);
  --color-semantic-accent-brand-highlight: var(--color-yellow-500);
  --color-semantic-accent-link:            var(--color-blue-500);

  /* Status */
  --color-semantic-status-success: var(--color-green-500);
  --color-semantic-status-warning: var(--color-yellow-500);
  --color-semantic-status-danger:  var(--color-red-600);
  --color-semantic-status-pending: var(--color-orange-500);
  --color-semantic-status-info:    var(--color-blue-300);

  /* Action (buttons / interactive) */
  --color-semantic-action-branded:         var(--color-blue-500);
  --color-semantic-action-branded-hover:   var(--color-blue-600);
  --color-semantic-action-branded-pressed: var(--color-blue-700);
  --color-semantic-action-branded-focus:   var(--color-blue-400);

  /* CardContainer (Storybook semantic) */
  --color-semantic-card-container-bg:             var(--color-paper-light-01dp);
  --color-semantic-card-container-bg-hover:       var(--color-paper-light-02dp);
  --color-semantic-card-container-outline-border: var(--color-neutral-200);
  --color-semantic-card-container-data-viz-bg:    var(--color-paper-light-01dp);

  /* ActionCard (Storybook semantic) */
  --color-semantic-action-card-bg:       var(--color-neutral-0);
  --color-semantic-action-card-bg-hover: var(--color-paper-light-01dp);
  --color-semantic-action-card-border:   var(--color-neutral-200);
  --color-semantic-action-card-label:    var(--color-semantic-fg-primary);
  --color-semantic-action-card-icon:     var(--color-semantic-fg-muted);

  /* ──────────────────────────────────────────────────────────────
     TYPOGRAPHY — IBM Plex stacks (next/font overrides at runtime
     in webapp; for docs we load IBM Plex via Material's
     theme.font.text/code in mkdocs.yml.)
     ────────────────────────────────────────────────────────────── */
  --font-plex-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-plex-mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* Material reads these to set the default text/code fonts */
  --md-text-font: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --md-code-font: 'IBM Plex Mono', ui-monospace, monospace;

  /* ── Radii ──────────────────────────────────────────────────── */
  --array-radius:    0.625rem;  /* 10px — canonical --radius */
  --array-radius-sm: calc(var(--array-radius) - 4px);
  --array-radius-md: calc(var(--array-radius) - 2px);
  --array-radius-lg: var(--array-radius);
  --array-radius-xl: calc(var(--array-radius) + 4px);

  /* ── Shadows ────────────────────────────────────────────────── */
  --array-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* ══════════════════════════════════════════════════════════════
   SEMANTIC LAYER — dark mode overrides
   ══════════════════════════════════════════════════════════════ */

[data-md-color-scheme="array-dark"] {

  /* Backgrounds */
  --color-semantic-bg-base:     var(--color-brand-dark-anchor);
  --color-semantic-bg-raised:   #1c1b22;
  --color-semantic-bg-overlay:  #2a2930;
  --color-semantic-bg-elevated: #2d2c32;
  --color-semantic-bg-wash:     #36353c;
  --color-semantic-bg-divider:  var(--color-purple-850);

  /* Foregrounds */
  --color-semantic-fg-primary:   var(--color-neutral-50);
  --color-semantic-fg-secondary: var(--color-neutral-200);
  --color-semantic-fg-muted:     var(--color-neutral-400);
  --color-semantic-fg-link:      var(--color-blue-300);

  /* Strokes */
  --color-semantic-stroke-default: var(--color-surface-navy-2);
  --color-semantic-stroke-strong:  var(--color-neutral-700);

  /* Status */
  --color-semantic-status-danger:  var(--color-red-500);
  --color-semantic-status-pending: var(--color-orange-400);

  /* Brand accents (link tint adapts) */
  --color-semantic-accent-link: var(--color-blue-300);

  /* CardContainer — dark surface palette */
  --color-semantic-card-container-bg:             var(--color-surface-navy-1);
  --color-semantic-card-container-bg-hover:       var(--color-surface-navy-2);
  --color-semantic-card-container-outline-border: var(--color-neutral-850);
  --color-semantic-card-container-data-viz-bg:    var(--color-surface-deep-2);

  /* ActionCard — dark surface palette */
  --color-semantic-action-card-bg:       var(--color-surface-navy-1);
  --color-semantic-action-card-bg-hover: var(--color-surface-navy-2);
  --color-semantic-action-card-border:   var(--color-neutral-850);

  /* Shadows */
  --array-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}