/* ===========================================================
   Sutra DS — Foundation
   Design tokens, typography, and utilities.
   =========================================================== */

@layer reset, tokens, base, utilities;

/* ===========================================================
   TOKENS — Tier 1 primitives
   =========================================================== */
@layer tokens {
  :root {
    /* Fonts */
    --font-display: 'Lexend Deca', system-ui, -apple-system, sans-serif;
    --font-body:    'Lexend',      system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* Density */
    --density-multiplier: 1;

    /* Spacing */
    --space-1:  calc(4px  * var(--density-multiplier));
    --space-2:  calc(8px  * var(--density-multiplier));
    --space-3:  calc(12px * var(--density-multiplier));
    --space-4:  calc(16px * var(--density-multiplier));
    --space-5:  calc(20px * var(--density-multiplier));
    --space-6:  calc(24px * var(--density-multiplier));
    --space-8:  calc(32px * var(--density-multiplier));
    --space-10: calc(40px * var(--density-multiplier));
    --space-12: calc(48px * var(--density-multiplier));
    --space-16: calc(64px * var(--density-multiplier));
    --space-20: calc(80px * var(--density-multiplier));
    --space-24: calc(96px * var(--density-multiplier));
    --space-32: calc(128px * var(--density-multiplier));
    --space-40: calc(160px * var(--density-multiplier));
    --space-48: calc(192px * var(--density-multiplier));

    /* Type */
    --font-size-xs:         clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
    --font-size-sm:         clamp(0.875rem, 0.83rem + 0.18vw, 1rem);
    --font-size-base:       clamp(1rem, 0.95rem + 0.27vw, 1.125rem);
    --font-size-lg:         clamp(1.125rem, 1.05rem + 0.36vw, 1.25rem);
    --font-size-xl:         clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
    --font-size-2xl:        clamp(1.5rem, 1.32rem + 0.91vw, 1.875rem);
    --font-size-3xl:        clamp(1.875rem, 1.61rem + 1.36vw, 2.5rem);
    --font-size-4xl:        clamp(2.25rem, 1.89rem + 1.82vw, 3rem);
    --font-size-display-sm: clamp(2.5rem, 2.04rem + 2.36vw, 3.5rem);
    --font-size-display-md: clamp(3rem, 2.36rem + 3.27vw, 4.5rem);
    --font-size-display-lg: clamp(3.5rem, 2.59rem + 4.55vw, 5.5rem);

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    --tracking-tighter: -0.04em;
    --tracking-tight:   -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.02em;
    --tracking-wider:   0.06em;

    /* Radii */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-3xl:  32px;
    --radius-full: 9999px;

    /* Borders */
    --border-thin:  1px;
    --border-base:  2px;
    --border-thick: 3px;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.04);
    --shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.12), 0 4px 8px -2px rgb(0 0 0 / 0.06);
    --shadow-xl: 0 24px 48px -8px rgb(0 0 0 / 0.18), 0 8px 16px -4px rgb(0 0 0 / 0.08);

    /* Blur */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;

    /* Motion */
    --duration-instant: 0ms;
    --duration-fast:    120ms;
    --duration-base:    220ms;
    --duration-slow:    380ms;
    --duration-slower:  600ms;

    --ease-linear:    linear;
    --ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --ease-out:       cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasize: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring:    cubic-bezier(0.5, 1.4, 0.5, 1);

    /* z-index */
    --z-base:    1;
    --z-raised:  10;
    --z-overlay: 100;
    --z-modal:   1000;
    --z-toast:   1100;

    /* Containers */
    --container-prose: 65ch;
    --container-max:   1280px;

    /* Color ramps */
    --color-neutral-0:    #ffffff;
    --color-neutral-50:   #fafafa;
    --color-neutral-100:  #f5f5f5;
    --color-neutral-200:  #e5e5e5;
    --color-neutral-300:  #d4d4d4;
    --color-neutral-400:  #a3a3a3;
    --color-neutral-500:  #737373;
    --color-neutral-600:  #525252;
    --color-neutral-700:  #404040;
    --color-neutral-800:  #262626;
    --color-neutral-900:  #171717;
    --color-neutral-950:  #0a0a0a;
    --color-neutral-1000: #000000;

    --color-copper-50:   #fbf3ef;
    --color-copper-100:  #f5e1d4;
    --color-copper-200:  #ebc1a5;
    --color-copper-300:  #dc9a72;
    --color-copper-400:  #cb7849;
    --color-copper-500:  #b96234;
    --color-copper-600:  #964825;
    --color-copper-700:  #7d3c20;
    --color-copper-800:  #5e2d18;
    --color-copper-900:  #3d1d10;
    --color-copper-950:  #260f08;

    --color-teal-50:   #ecfafa;
    --color-teal-100:  #cef0ef;
    --color-teal-200:  #9de1df;
    --color-teal-300:  #6acdca;
    --color-teal-400:  #3fb1ad;
    --color-teal-500:  #289590;
    --color-teal-600:  #1f7672;
    --color-teal-700:  #1b5e5b;
    --color-teal-800:  #154745;
    --color-teal-900:  #0e2e2c;
    --color-teal-950:  #061a19;

    --color-info-50:   #eff6ff;
    --color-info-100:  #dbeafe;
    --color-info-200:  #bfdbfe;
    --color-info-300:  #93c5fd;
    --color-info-400:  #60a5fa;
    --color-info-500:  #3b82f6;
    --color-info-600:  #2563eb;
    --color-info-700:  #1d4ed8;
    --color-info-800:  #1e40af;
    --color-info-900:  #1e3a8a;
    --color-info-950:  #172554;

    --color-success-50:   #f0fdf4;
    --color-success-100:  #dcfce7;
    --color-success-200:  #bbf7d0;
    --color-success-300:  #86efac;
    --color-success-400:  #4ade80;
    --color-success-500:  #22c55e;
    --color-success-600:  #16a34a;
    --color-success-700:  #15803d;
    --color-success-800:  #166534;
    --color-success-900:  #14532d;
    --color-success-950:  #052e16;

    --color-warning-50:   #fefce8;
    --color-warning-100:  #fef9c3;
    --color-warning-200:  #fef08a;
    --color-warning-300:  #fde047;
    --color-warning-400:  #facc15;
    --color-warning-500:  #eab308;
    --color-warning-600:  #ca8a04;
    --color-warning-700:  #a16207;
    --color-warning-800:  #854d0e;
    --color-warning-900:  #713f12;
    --color-warning-950:  #422006;

    --color-danger-50:   #fef2f2;
    --color-danger-100:  #fee2e2;
    --color-danger-200:  #fecaca;
    --color-danger-300:  #fca5a5;
    --color-danger-400:  #f87171;
    --color-danger-500:  #ef4444;
    --color-danger-600:  #dc2626;
    --color-danger-700:  #b91c1c;
    --color-danger-800:  #991b1b;
    --color-danger-900:  #7f1d1d;
    --color-danger-950:  #450a0a;

    /* Semantic — Tier 2 */
    --color-surface-page:    var(--color-neutral-50);
    --color-surface-base:    var(--color-neutral-0);
    --color-surface-raised:  var(--color-neutral-100);
    --color-surface-overlay: var(--color-neutral-0);

    --color-text-primary:   var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-tertiary:  var(--color-neutral-500);
    --color-text-on-brand:  var(--color-neutral-0);
    --color-text-disabled:  var(--color-neutral-400);

    --color-border-subtle:  var(--color-neutral-200);
    --color-border-default: var(--color-neutral-300);
    --color-border-strong:  var(--color-neutral-400);
    --color-border-focus:   var(--color-copper-500);

    --color-brand-primary: var(--color-copper-600);
    --color-brand-hover:   var(--color-copper-700);
    --color-brand-active:  var(--color-copper-800);
    --color-brand-subtle:  var(--color-copper-100);

    --color-accent-primary: var(--color-teal-600);
    --color-accent-hover:   var(--color-teal-700);
    --color-accent-active:  var(--color-teal-800);
    --color-accent-subtle:  var(--color-teal-100);

    --color-info-bg:     var(--color-info-50);
    --color-info-fg:     var(--color-info-700);
    --color-info-border: var(--color-info-300);

    --color-success-bg:     var(--color-success-50);
    --color-success-fg:     var(--color-success-700);
    --color-success-border: var(--color-success-300);

    --color-warning-bg:     var(--color-warning-50);
    --color-warning-fg:     var(--color-warning-700);
    --color-warning-border: var(--color-warning-300);

    --color-danger-bg:     var(--color-danger-50);
    --color-danger-fg:     var(--color-danger-700);
    --color-danger-border: var(--color-danger-300);

    --gutter-base:    var(--space-6);
    --gutter-lg:      var(--space-8);
    --section-y-base: var(--space-20);
    --section-y-lg:   var(--space-32);
  }

  /* Dark mode */
  :root[data-theme="dark"] {
    --color-surface-page:    var(--color-neutral-950);
    --color-surface-base:    var(--color-neutral-900);
    --color-surface-raised:  var(--color-neutral-800);
    --color-surface-overlay: var(--color-neutral-800);

    --color-text-primary:   var(--color-neutral-50);
    --color-text-secondary: var(--color-neutral-300);
    --color-text-tertiary:  var(--color-neutral-400);
    --color-text-disabled:  var(--color-neutral-600);

    --color-border-subtle:  var(--color-neutral-800);
    --color-border-default: var(--color-neutral-700);
    --color-border-strong:  var(--color-neutral-600);
    --color-border-focus:   var(--color-copper-400);

    --color-brand-primary: var(--color-copper-500);
    --color-brand-hover:   var(--color-copper-400);
    --color-brand-active:  var(--color-copper-300);
    --color-brand-subtle:  var(--color-copper-900);

    --color-accent-primary: var(--color-teal-400);
    --color-accent-hover:   var(--color-teal-300);
    --color-accent-active:  var(--color-teal-200);
    --color-accent-subtle:  var(--color-teal-900);

    --color-info-bg:     var(--color-info-950);
    --color-info-fg:     var(--color-info-300);
    --color-info-border: var(--color-info-800);

    --color-success-bg:     var(--color-success-950);
    --color-success-fg:     var(--color-success-300);
    --color-success-border: var(--color-success-800);

    --color-warning-bg:     var(--color-warning-950);
    --color-warning-fg:     var(--color-warning-300);
    --color-warning-border: var(--color-warning-800);

    --color-danger-bg:     var(--color-danger-950);
    --color-danger-fg:     var(--color-danger-300);
    --color-danger-border: var(--color-danger-800);
  }

  /* OKLCH for richer color on supporting browsers */
  @supports (color: oklch(0% 0 0)) {
    :root {
      --color-copper-500: oklch(58% 0.135 40);
      --color-copper-600: oklch(50% 0.130 38);
      --color-copper-700: oklch(43% 0.115 36);
      --color-teal-500:   oklch(56% 0.090 195);
      --color-teal-600:   oklch(48% 0.080 195);
      --color-teal-700:   oklch(42% 0.070 195);
    }
  }

  /* Reduced motion — global */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-instant: 0ms;
      --duration-fast:    0ms;
      --duration-base:    0ms;
      --duration-slow:    0ms;
      --duration-slower:  0ms;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ===========================================================
   BASE
   =========================================================== */
@layer base {
  :where(html) {
    font-family: var(--font-body);
    font-size: 100%;
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  :where(body) { font-style: normal; font-weight: 400; }
  :where(p) { text-wrap: pretty; }
  :where(::selection) {
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
  }
}

/* ===========================================================
   TYPOGRAPHY (sutra-prefixed component-style classes)
   Using @layer components keeps these out of the cascade fight
   with BD's defaults without needing the .x.x doubled-selector hack.
   =========================================================== */
@layer components {
  /* Display */
  .sutra-display-lg,
  .sutra-display-md,
  .sutra-display-sm {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    text-wrap: balance;
  }
  .sutra-display-lg { font-size: var(--font-size-display-lg); }
  .sutra-display-md { font-size: var(--font-size-display-md); }
  .sutra-display-sm { font-size: var(--font-size-display-sm); }

  /* Headings */
  .sutra-h1, .sutra-h2, .sutra-h3,
  .sutra-h4, .sutra-h5, .sutra-h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-text-primary);
    text-wrap: balance;
  }
  .sutra-h1 { font-size: var(--font-size-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
  .sutra-h2 { font-size: var(--font-size-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
  .sutra-h3 { font-size: var(--font-size-2xl); line-height: var(--leading-snug); }
  .sutra-h4 { font-size: var(--font-size-xl);  line-height: var(--leading-snug); }
  .sutra-h5 { font-size: var(--font-size-lg);  line-height: var(--leading-snug); }
  .sutra-h6 { font-size: var(--font-size-base); line-height: var(--leading-snug); }

  /* Body */
  .sutra-lead {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: 400;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    text-wrap: pretty;
  }
  .sutra-body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    text-wrap: pretty;
  }
  .sutra-small {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
  }
  .sutra-caption {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--color-text-tertiary);
  }

  .sutra-eyebrow {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-brand-primary);
    line-height: var(--leading-normal);
  }

  .sutra-mono {
    font-family: var(--font-mono);
    font-size: 0.95em;
    font-weight: 400;
  }
}

/* ===========================================================
   UTILITIES
   =========================================================== */
@layer utilities {
  .sutra-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter-base);
  }
  .sutra-container-prose {
    max-width: var(--container-prose);
    margin-inline: auto;
    padding-inline: var(--gutter-base);
  }
  .sutra-stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }
  .sutra-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-3));
    align-items: center;
  }
  .sutra-center { display: grid; place-items: center; }
  .sutra-grid-auto {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
  .sutra-text-balance { text-wrap: balance; }
  .sutra-text-pretty  { text-wrap: pretty; }
  .sutra-text-center  { text-align: center; }
  .sutra-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .sutra-is-hidden { display: none !important; }
}