/* ==========================================================================
   tokens.css — IBM User Group design tokens

   The visual language follows the DeepSeek Harness reference: a dark-first
   page, pill geometry, translucent "glass" surfaces and a generous spatial
   scale. Typography stays IBM Plex (self-hosted, no network dependency) but
   adopts the reference's sizes, weights and tracking.

   Layers, in order:
     1. Typefaces
     2. Core palette (Carbon swatches, kept as raw material)
     3. ds-* system tokens — dark context is the default
     4. Light context override
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typeface — IBM Plex, self-hosted (SIL OFL 1.1, see fonts/LICENSE.txt)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Animatable angle, drives the rotating conic border on featured cards.
   Declared before use so the fallback path stays sane in older engines. */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* ------------------------------------------------------------------------
     2. Core palette — Carbon v11 swatches, kept as raw material for accents
     ------------------------------------------------------------------------ */

  --blue-10: #edf5ff;
  --blue-20: #d0e2ff;
  --blue-30: #a6c8ff;
  --blue-40: #78a9ff;
  --blue-50: #4589ff;
  --blue-60: #0f62fe;
  --blue-70: #0043ce;
  --blue-80: #002d9c;
  --blue-90: #001d6c;
  --blue-100: #001141;

  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-40: #a8a8a8;
  --gray-50: #8d8d8d;
  --gray-60: #6f6f6f;
  --gray-70: #525252;
  --gray-80: #393939;
  --gray-90: #262626;
  --gray-100: #161616;

  --white: #ffffff;
  --black: #000000;

  --purple-40: #be95ff;
  --purple-50: #a56eff;
  --purple-60: #8a3ffc;
  --purple-70: #6929c4;

  --magenta-40: #ff7eb6;
  --magenta-50: #ee5396;
  --magenta-60: #d02670;
  --magenta-70: #9f1853;

  --cyan-30: #82cfff;
  --cyan-40: #33b1ff;
  --cyan-50: #1192e8;
  --cyan-60: #0072c3;

  --teal-40: #08bdba;
  --teal-50: #009d9a;
  --teal-60: #007d79;

  --green-40: #42be65;
  --green-50: #24a148;
  --green-60: #198038;

  --yellow-30: #f1c21b;
  --orange-40: #ff832b;
  --red-50: #fa4d56;
  --red-60: #da1e28;

  /* ------------------------------------------------------------------------
     3. Type — IBM Plex at the reference's scale
     ------------------------------------------------------------------------ */

  --ds-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Helvetica, Arial, sans-serif;
  --ds-font-display: var(--ds-font-sans);
  --ds-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', monospace;

  /* Kept as aliases so any stray rule that still reads the old names works. */
  --font-sans: var(--ds-font-sans);
  --font-mono: var(--ds-font-mono);

  /* ------------------------------------------------------------------------
     4. Spacing — the reference's scale, which jumps hard at the top end to
        buy the airy section rhythm
     ------------------------------------------------------------------------ */

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 40px;
  --ds-space-8: 56px;
  --ds-space-9: 80px;
  --ds-space-10: 120px;
  --ds-space-11: 160px;
  --ds-space-12: 200px;
  --ds-space-13: 240px;

  /* Vertical rhythm between major sections */
  --ds-section-y: clamp(var(--ds-space-9), 8vw, var(--ds-space-11));
  --ds-section-y-tight: clamp(var(--ds-space-8), 5vw, var(--ds-space-9));

  /* ------------------------------------------------------------------------
     5. Radius — pill-first geometry
     ------------------------------------------------------------------------ */

  --ds-radius-pill: 100px;
  --ds-radius-card: 24px;
  --ds-radius-panel: 16px;
  --ds-radius-media: 10px;
  --ds-radius-input: 10px;
  --ds-radius-sm: 8px;

  /* ------------------------------------------------------------------------
     6. Layout
     ------------------------------------------------------------------------ */

  --ds-container: min(100% - 48px, 1140px);
  --ds-header-height: 56px;
  --ds-blur-glass: 12px;

  --ds-border-width: 1px;
  --ds-border-width-thick: 2px;

  /* ------------------------------------------------------------------------
     7. Motion
     ------------------------------------------------------------------------ */

  --ds-duration-fast: 150ms;
  --ds-duration-base: 200ms;
  --ds-duration-slow: 350ms;
  --ds-duration-slower: 500ms;
  --ds-duration-enter: 800ms;

  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-in-out: ease-in-out;

  /* ------------------------------------------------------------------------
     8. Z-index
     ------------------------------------------------------------------------ */

  --ds-z-base: 0;
  --ds-z-raised: 10;
  --ds-z-header: 50;
  --ds-z-drawer: 9990;
  --ds-z-toast: 9995;

  /* ------------------------------------------------------------------------
     9. Dark context — the page default
     ------------------------------------------------------------------------ */

  color-scheme: dark;

  --ds-color-bg-page: #0a0a0a;

  --ds-color-brand: #6799fe;
  --ds-color-brand-deep: #ffffff;
  --ds-color-brand-strong: #4d6bfe;

  --ds-color-text-primary: #ffffff;
  --ds-color-text-secondary: rgba(255, 255, 255, 0.8);
  --ds-color-text-description: rgba(255, 255, 255, 0.5);
  --ds-color-text-placeholder: rgba(255, 255, 255, 0.3);
  --ds-color-text-inverse: #0a0a0a;

  --ds-color-static-white: #ffffff;
  --ds-color-static-black: #0f0f0f;

  /* Surfaces are translucent so the page tone reads through every card */
  --ds-color-bg-surface-1: rgba(255, 255, 255, 0.06);
  --ds-color-bg-surface-2: rgba(255, 255, 255, 0.04);
  --ds-color-bg-surface-3: rgba(255, 255, 255, 0.02);
  --ds-color-bg-surface-4: rgba(255, 255, 255, 0.015);
  --ds-color-bg-surface-5: rgba(255, 255, 255, 0.12);
  --ds-color-bg-surface-raised: rgba(255, 255, 255, 0.25);
  --ds-color-bg-overlay: #262626;
  --ds-color-bg-code: rgba(0, 0, 0, 0.35);
  --ds-color-bg-hover: rgba(255, 255, 255, 0.06);
  --ds-color-bg-hero-cta: rgba(255, 255, 255, 0.12);
  --ds-color-bg-input: rgba(255, 255, 255, 0.08);
  --ds-color-bg-input-hover: rgba(255, 255, 255, 0.12);

  --ds-color-border-subtle: rgba(255, 255, 255, 0.08);
  --ds-color-border-default: rgba(255, 255, 255, 0.06);
  --ds-color-border-divider: rgba(255, 255, 255, 0.25);
  --ds-color-border-hover: rgba(255, 255, 255, 0.2);
  --ds-color-border-strong: rgba(255, 255, 255, 0.24);
  --ds-color-border-input: rgba(255, 255, 255, 0.2);
  --ds-color-border-input-focus: rgba(255, 255, 255, 0.25);

  --ds-color-scrollbar: rgba(255, 255, 255, 0.2);
  --ds-color-focus: #ffffff;

  --ds-shadow-card: rgba(255, 255, 255, 0.12) 0 1px 0 0 inset;
  --ds-shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.45);
  --ds-shadow-terminal: 0 24px 56px rgba(0, 0, 0, 0.55);

  /* Buttons — one token set per variant, swapped wholesale by theme */
  --ds-btn-primary-bg: #ffffff;
  --ds-btn-primary-text: #0a0a0a;
  --ds-btn-primary-border: transparent;
  --ds-btn-primary-hover-bg: rgba(0, 0, 0, 0.2);

  --ds-btn-secondary-bg: var(--ds-color-bg-surface-1);
  --ds-btn-secondary-text: #ffffff;
  --ds-btn-secondary-border: rgba(255, 255, 255, 0.15);
  --ds-btn-secondary-hover-bg: rgba(255, 255, 255, 0.2);
  --ds-btn-secondary-hover-border: rgba(255, 255, 255, 0.6);

  --ds-btn-ghost-bg: transparent;
  --ds-btn-ghost-text: #ffffff;
  --ds-btn-ghost-border: transparent;
  --ds-btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
  --ds-btn-ghost-hover-border: rgba(255, 255, 255, 0.2);

  --ds-btn-liquid-bg: #ffffff;
  --ds-btn-liquid-hover-bg: rgba(0, 0, 0, 0.2);

  /* Accent gradient, retained from the IBM palette for rules and glows */
  --ds-gradient-accent: linear-gradient(
    90deg,
    var(--ds-color-brand) 0%,
    var(--purple-50) 45%,
    var(--magenta-50) 100%
  );
  --ds-gradient-glow: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    rgba(103, 153, 254, 0.18) 0%,
    transparent 70%
  );

  --ds-support-error: var(--red-50);
  --ds-support-success: var(--green-40);
  --ds-support-warning: var(--yellow-30);
}

/* --------------------------------------------------------------------------
   10. Light context — available via [data-theme="light"] on any subtree.
   The page ships dark; this exists so an individual band (or a future
   light-mode toggle) can flip without touching component CSS.
   -------------------------------------------------------------------------- */

[data-theme='light'] {
  color-scheme: light;

  --ds-color-bg-page: #f9f8f8;

  --ds-color-brand: #4d6bfe;
  --ds-color-brand-deep: #3a65c2;
  --ds-color-brand-strong: #234792;

  --ds-color-text-primary: #1e232c;
  --ds-color-text-secondary: rgba(0, 0, 0, 0.7);
  --ds-color-text-description: rgba(0, 0, 0, 0.65);
  --ds-color-text-placeholder: #8691a1;
  --ds-color-text-inverse: #ffffff;

  --ds-color-bg-surface-1: rgba(255, 255, 255, 0.3);
  --ds-color-bg-surface-2: rgba(255, 255, 255, 0.2);
  --ds-color-bg-surface-3: rgba(0, 0, 0, 0.03);
  --ds-color-bg-surface-4: rgba(0, 0, 0, 0.02);
  --ds-color-bg-surface-5: rgba(0, 0, 0, 0.05);
  --ds-color-bg-surface-raised: rgba(255, 255, 255, 0.45);
  --ds-color-bg-overlay: #ffffff;
  --ds-color-bg-code: rgba(0, 0, 0, 0.05);
  --ds-color-bg-hover: rgba(0, 0, 0, 0.04);
  --ds-color-bg-hero-cta: rgba(255, 255, 255, 0.38);
  --ds-color-bg-input: rgba(255, 255, 255, 0.2);
  --ds-color-bg-input-hover: rgba(255, 255, 255, 0.36);

  --ds-color-border-subtle: rgba(0, 0, 0, 0.06);
  --ds-color-border-default: rgba(0, 0, 0, 0.1);
  --ds-color-border-divider: rgba(0, 0, 0, 0.08);
  --ds-color-border-hover: rgba(115, 113, 110, 0.2);
  --ds-color-border-strong: rgba(0, 0, 0, 0.2);

  --ds-color-scrollbar: rgba(0, 0, 0, 0.15);
  --ds-color-focus: #4d6bfe;

  --ds-shadow-card: 0 0 0 1px #f1f5f9, 0 2px 4px rgba(0, 0, 0, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.05);
  --ds-shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.08);
  --ds-shadow-terminal: 0 24px 56px rgba(0, 0, 0, 0.12);

  --ds-btn-primary-bg: #1a1615;
  --ds-btn-primary-text: #ffffff;
  --ds-btn-primary-hover-bg: rgba(255, 255, 255, 0.3);

  --ds-btn-secondary-bg: rgba(255, 255, 255, 0.4);
  --ds-btn-secondary-text: #1e232c;
  --ds-btn-secondary-border: rgba(9, 45, 78, 0.18);
  --ds-btn-secondary-hover-bg: rgba(0, 0, 0, 0.05);
  --ds-btn-secondary-hover-border: rgba(9, 45, 78, 0.36);

  --ds-btn-ghost-text: #121c31;
  --ds-btn-ghost-hover-bg: rgba(0, 0, 0, 0.04);
  --ds-btn-ghost-hover-border: rgba(115, 113, 110, 0.2);

  --ds-btn-liquid-bg: rgba(255, 255, 255, 0.4);
  --ds-btn-liquid-hover-bg: rgba(0, 0, 0, 0.2);
}