/*
 * Sako Labs - Global CSS Setup
 * This file loads first (alphabetically) so it sets up:
 * 1. CSS Layer order
 * 2. Custom fonts
 * 3. Design tokens
 */

/* Define layer order - must be declared before layers are used */
@layer reset, base, components, modules, utilities;

/* ===== CUSTOM FONTS ===== */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/EBGaramond-Variable-9377f77f.woff2") format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/EBGaramond-Italic-Variable-0a54e5cd.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/InterVariable-884c49a1.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/InterVariable-Italic-0aa7a4b3.woff2") format('woff2');
}

/* ===== DESIGN TOKENS ===== */

:root {
  /* ===== SPACING ===== */

  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);

  --block-space: 1rem;
  --block-space-quarter: calc(var(--block-space) / 4);
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-3quarter: calc(var(--block-space) * 3 / 4);
  --block-space-1half: calc(var(--block-space) * 1.5);
  --block-space-double: calc(var(--block-space) * 2);

  /* Layout widths */
  --content-width: 56rem;
  --content-width-md: 42rem;
  --content-width-prose: 36rem;
  --content-width-sm: 28rem;
  --content-width-xs: 24rem;
  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));

  /* Breakpoints (reference - CSS can't use vars in @media)
     Mobile: < 640px
     Tablet: 640px - 799px
     Desktop: >= 800px
     Large: >= 1280px */

  /* ===== TYPOGRAPHY ===== */

  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body-features: "ss02" 1;
  --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* Typography - Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 2;

  /* Typography - Size-based scale */
  --text-xx-small: 0.625rem;
  --text-x-small: 0.75rem;
  --text-small: clamp(0.8125rem, 0.25vw + 0.75rem, 0.9375rem);
  --text-normal: clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem);
  --text-medium: clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
  --text-large: clamp(1.1875rem, 0.25vw + 1.125rem, 1.3125rem);
  --text-x-large: clamp(1.3125rem, 0.25vw + 1.25rem, 1.4375rem);
  --text-xx-large: clamp(1.6875rem, 0.4vw + 1.5rem, 2rem);

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ===== COLOR SYSTEM ===== */
  /* Two-layer pattern: raw LCH triplets → resolved oklch() colors.
     Dark mode only redeclares --lch-* values; --color-* auto-adapts.
     Unlocks alpha compositing: oklch(var(--lch-blue) / 50%). */

  /* Layer 1: Raw LCH triplets */

  /* Fixed — never change in dark mode */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;

  /* Adaptive page background (flips in dark mode) */
  --lch-canvas: 100% 0 0;

  /* Gray scale */
  --lch-gray-lightest: 97% 0.002 266;
  --lch-gray-lighter: 95% 0.003 268;
  --lch-gray-light: 93% 0.003 268;
  --lch-gray-medium: 88% 0.003 268;
  --lch-gray: 65% 0.005 270;
  --lch-gray-dark: 45% 0.01 274;
  --lch-gray-darker: 18% 0.04 260;

  /* Blue scale (hue 260 — sakolabs identity) */
  --lch-blue-lightest: 96% 0.02 260;
  --lch-blue-lighter: 90% 0.04 260;
  --lch-blue-light: 70% 0.07 260;
  --lch-blue: 43% 0.09 260;
  --lch-blue-dark: 35% 0.08 260;
  --lch-blue-darker: 26% 0.06 260;
  --lch-blue-darkest: 18% 0.04 260;

  /* Red scale */
  --lch-red-light: 84% 0.08 25;
  --lch-red: 60% 0.25 25;

  /* Layer 2: Resolved colors (reference raw tokens) */

  /* Gray scale */
  --color-white: oklch(var(--lch-canvas));
  --color-gray-lightest: oklch(var(--lch-gray-lightest));
  --color-gray-lighter: oklch(var(--lch-gray-lighter));
  --color-gray-light: oklch(var(--lch-gray-light));
  --color-gray-medium: oklch(var(--lch-gray-medium));
  --color-gray: oklch(var(--lch-gray));
  --color-gray-dark: oklch(var(--lch-gray-dark));
  --color-gray-darker: oklch(var(--lch-gray-darker));
  --color-black: oklch(var(--lch-black));

  /* Blue scale */
  --color-blue-lightest: oklch(var(--lch-blue-lightest));
  --color-blue-lighter: oklch(var(--lch-blue-lighter));
  --color-blue-light: oklch(var(--lch-blue-light));
  --color-blue: oklch(var(--lch-blue));
  --color-blue-dark: oklch(var(--lch-blue-dark));
  --color-blue-darker: oklch(var(--lch-blue-darker));
  --color-blue-darkest: oklch(var(--lch-blue-darkest));

  /* Red scale */
  --color-red-light: oklch(var(--lch-red-light));
  --color-red: oklch(var(--lch-red));

  /* Brand — alias to blue scale */
  --color-brand-navy: var(--color-blue-dark);

  /* Purpose aliases — semantic light/dark pairs for flash, badge, card states */
  --color-positive-light: var(--color-blue-lightest);
  --color-positive-dark: var(--color-blue-dark);
  --color-negative-light: var(--color-red-light);
  --color-negative-dark: var(--color-red);
  --color-warning-dark: var(--color-red);

  /* ===== RADIUS ===== */

  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-full: 9999px;

  /* ===== BORDERS & SHADOWS ===== */

  --border-subtle: 1px solid var(--color-gray-lighter);
  --border-standard: 1px solid var(--color-gray-light);

  --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%),
            0 0.2em 0.2em oklch(var(--lch-black) / 5%),
            0 0.4em 0.4em oklch(var(--lch-black) / 5%),
            0 0.8em 0.8em oklch(var(--lch-black) / 5%);

  /* ===== LAYOUT ===== */

  --sidebar-width: 20rem;
  --dropdown-width: 12rem;

  /* Avatar */
  --avatar-size: 2rem;
  --avatar-size-lg: 3rem;

  /* Icon sizes */
  --icon-xs: 0.75rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  --icon-2xl: 3rem;
  --icon-xxl: 4rem;

  /* Component sizes */
  --logo-height: 1.8rem;
  --logo-height-lg: 2.2rem;
  --logo-size: 6rem;

  /* ===== Z-INDEX HIERARCHY ===== */

  --z-base: 1;
  --z-content: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ===== FOCUS RING ===== */

  --focus-ring-color: var(--color-gray-dark);
  --focus-ring-size: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);

  /* ===== EASING ===== */

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
  --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);

  /* Mobile: slightly larger base text for readability */
  @media (max-width: 639px) {
    --text-small: clamp(0.875rem, 0.125vw + 0.84rem, 0.9375rem);
    --text-medium: clamp(1.125rem, 0.25vw + 1.0625rem, 1.1875rem);
  }
}

/* ===== DARK MODE SUPPORT ===== */

/* Explicit theme choice (highest priority) */
html[data-theme="dark"] {
  --lch-canvas: 15% 0.02 285;
  --lch-gray-lightest: 18% 0.02 285;
  --lch-gray-lighter: 22% 0.02 285;
  --lch-gray-light: 26% 0.02 285;
  --lch-gray-medium: 30% 0.018 260;
  --lch-gray: 65% 0.015 260;
  --lch-gray-dark: 80% 0.009 260;
  --lch-gray-darker: 96% 0.01 260;

  --lch-blue-lightest: 22% 0.03 260;
  --lch-blue-lighter: 28% 0.04 260;
  --lch-blue-light: 35% 0.06 260;
  --lch-blue: 55% 0.09 260;
  --lch-blue-dark: 65% 0.08 260;
  --lch-blue-darker: 75% 0.06 260;
  --lch-blue-darkest: 85% 0.04 260;

  --lch-red-light: 35% 0.05 25;
  --lch-red: 60% 0.25 25;

  --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
            0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
            0 0.4em 2.4em -1em oklch(var(--lch-black) / 0.7),
            0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 0.8),
            0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
            0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
}

/* System preference (when no explicit theme) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --lch-canvas: 15% 0.02 285;
    --lch-gray-lightest: 18% 0.02 285;
    --lch-gray-lighter: 22% 0.02 285;
    --lch-gray-light: 26% 0.02 285;
    --lch-gray-medium: 30% 0.018 260;
    --lch-gray: 65% 0.015 260;
    --lch-gray-dark: 80% 0.009 260;
    --lch-gray-darker: 96% 0.01 260;

    --lch-blue-lightest: 22% 0.03 260;
    --lch-blue-lighter: 28% 0.04 260;
    --lch-blue-light: 35% 0.06 260;
    --lch-blue: 55% 0.09 260;
    --lch-blue-dark: 65% 0.08 260;
    --lch-blue-darker: 75% 0.06 260;
    --lch-blue-darkest: 85% 0.04 260;

    --lch-red-light: 35% 0.05 25;
    --lch-red: 60% 0.25 25;

    --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
              0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
              0 0.4em 2.4em -1em oklch(var(--lch-black) / 0.7),
              0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 0.8),
              0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
              0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
  }
}