/* =============================================================================
   x-root Design Tokens
   Inspired by IBM Carbon: Palette → Semantic mapping
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     Palette Layer — raw color values, never used directly in components
     --------------------------------------------------------------------------- */

  --palette-navy-900: #0A3A6B;
  --palette-navy-700: #0D4D94;
  --palette-navy-500: #1A6BB5;
  --palette-navy-100: #E8F0FA;

  --palette-bronze-700: #8A6B3A;
  --palette-bronze-500: #B89968;
  --palette-bronze-300: #D4B88A;
  --palette-bronze-100: #F5EDD9;

  --palette-gray-900: #2C2C2C;
  --palette-gray-700: #3A3A3C;
  --palette-gray-500: #606880;
  --palette-gray-200: #E8E8E8;
  --palette-gray-100: #F5F5F5;
  --palette-white:    #FFFFFF;

  --palette-green-600: #1A7A2A;
  --palette-green-500: #23A137;
  --palette-amber-500: #D4A847;
  --palette-red-600:   #B11233;

  /* Arctic White — Developer Onboarding deck (glass / ice) */
  --palette-arctic-bg:       #f8fbff;
  --palette-arctic-ink:      #071428;
  --palette-arctic-blue-700: #1d4ed8;
  --palette-arctic-blue-500: #3b82f6;
  --palette-arctic-sky-300:  #93c5fd;
  --palette-arctic-sky-400:  #60a5fa;
  --palette-arctic-mist:     #dbeafe;
  /* Bento third column accent (distinct from primary blue + headline blue) */
  --palette-bento-tertiary: #a855f7;
  /* Presentation: diagram <img> wrapper — padding so strokes/filters are not clipped */
  --diagram-safe-inset: 12px;

  /* ---------------------------------------------------------------------------
     Semantic Layer — intent-based aliases consumed by all components
     --------------------------------------------------------------------------- */

  /* Brand */
  --color-brand:       var(--palette-navy-900);
  --color-brand-mid:   var(--palette-navy-700);
  --color-brand-light: var(--palette-navy-100);

  /* Accent */
  --color-accent:       var(--palette-bronze-500);
  --color-accent-dark:  var(--palette-bronze-700);
  --color-accent-light: var(--palette-bronze-100);

  /* Text */
  --color-text-primary:   var(--palette-gray-900);
  --color-text-secondary: var(--palette-gray-500);
  --color-text-on-brand:  var(--palette-white);

  /* Backgrounds */
  --color-bg-default: var(--palette-white);
  --color-bg-subtle:  var(--palette-gray-100);
  --color-bg-brand:   var(--palette-navy-900);

  /* Borders */
  --color-border:       var(--palette-gray-200);
  --color-border-brand: var(--palette-navy-900);

  /* Interactive */
  --color-interactive: var(--palette-navy-900);

  /* Feedback */
  --color-success: var(--palette-green-500);
  --color-warning: var(--palette-amber-500);
  --color-danger:  var(--palette-red-600);
  --color-bg-success-subtle: #F0FFF4;
  --color-bg-danger-subtle:  #FFF5F5;

  /* ---------------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------------- */

  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  2rem;      /* 32px */
  --font-size-4xl:  2.5rem;    /* 40px */
  --font-size-5xl:  3rem;      /* 48px */

  /* ---------------------------------------------------------------------------
     Spacing — 8px base grid
     --------------------------------------------------------------------------- */

  --space-01: 4px;
  --space-02: 8px;
  --space-03: 12px;
  --space-04: 16px;
  --space-05: 24px;
  --space-06: 32px;
  --space-07: 48px;
  --space-08: 64px;

  /* ---------------------------------------------------------------------------
     Shape & Elevation
     --------------------------------------------------------------------------- */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.12);

  /* ---------------------------------------------------------------------------
     Kinetic / Space dark theme — palette (raw values, used by theme-kinetic.css)
     --------------------------------------------------------------------------- */

  --palette-space-bg:        #0a0a0f;
  --palette-space-bg-deep:   #050508;
  --palette-space-accent:    #4361ee;
  --palette-space-cyan:      #00f5d4;
  --palette-space-text:      #e8e8ef;
  --palette-space-purple:    #a855f7;
  --palette-space-glass:     rgba(255, 255, 255, 0.06);
  --palette-space-glass2:    rgba(67, 97, 238, 0.18);
  --palette-space-border:    rgba(67, 97, 238, 0.35);
  --palette-space-muted:     rgba(255, 255, 255, 0.55);
  --palette-space-muted2:    rgba(255, 255, 255, 0.42);

  /* Kinetic spacing — rem scale (no conflict with --space-* px scale) */
  --obk-space-01: 0.25rem;
  --obk-space-02: 0.5rem;
  --obk-space-03: 0.75rem;
  --obk-space-04: 1rem;
  --obk-space-05: 1.25rem;
  --obk-space-06: 1.75rem;

  /* Kinetic typography scale */
  --obk-t-hero:  clamp(2.6rem, 4.8vw, 3.85rem);
  --obk-t-h2:    clamp(1.65rem, 2.8vw, 2.35rem);
  --obk-t-body:  1.22rem;
  --obk-t-card:  1.02rem;
  --obk-t-label: 0.68rem;

}