/*
 * BelajarGPT.com - 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 =====
   Noto Sans JP — variable font (one file covers weight 100-900).
   Self-hosted from app/assets/fonts/NotoSansJP-Variable.woff2.
   Downloaded from Google Fonts gstatic CDN (v56). */

@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/NotoSansJP-Variable-cba8a544.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===== 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: 72rem;     /* 1152px - main container */
  --content-width-md: 56rem;  /* 896px - medium content */
  --content-width-prose: 48rem; /* 768px - prose reading width */
  --content-width-sm: 42rem;  /* 672px - forms */
  --content-width-xs: 32rem;  /* 512px - narrow content */
  --content-width-xxs: 24rem; /* 384px - auth forms */
  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
  --stats-grid-min: 10rem;    /* Minimum width for stat cards */

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

     Character-based (content-aware):
     Wide content: 100ch
     Very wide: 160ch */

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

  --font-body: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Noto Sans JP", 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 (8 steps) */
  --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-green) / 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 145;

  /* Green scale */
  --lch-green-lightest: 96% 0.02 148;
  --lch-green-lighter: 90% 0.04 148;
  --lch-green-light: 70% 0.07 148;
  --lch-green: 43% 0.09 148;
  --lch-green-dark: 35% 0.08 148;
  --lch-green-darker: 26% 0.06 148;
  --lch-green-darkest: 18% 0.04 148;

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

  /* Purple scale */
  --lch-purple-lightest: 96% 0.02 287;
  --lch-purple-lighter: 92% 0.04 287;
  --lch-purple-light: 85% 0.08 287;
  --lch-purple: 60% 0.18 287;
  --lch-purple-dark: 45% 0.20 287;
  --lch-purple-darker: 30% 0.15 287;

  /* 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));

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

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

  /* Purple scale */
  --color-purple-lightest: oklch(var(--lch-purple-lightest));
  --color-purple-lighter: oklch(var(--lch-purple-lighter));
  --color-purple-light: oklch(var(--lch-purple-light));
  --color-purple: oklch(var(--lch-purple));
  --color-purple-dark: oklch(var(--lch-purple-dark));
  --color-purple-darker: oklch(var(--lch-purple-darker));

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

  /* ===== CODE SYNTAX HIGHLIGHTING ===== */

  --color-code-token__att: var(--color-green-darker);
  --color-code-token__property: oklch(28% 0.025 145);
  --color-code-token__selector: oklch(35% 0.03 145);
  --color-code-token__comment: var(--color-gray);
  --color-code-token__operator: var(--color-green-darker);
  --color-code-token__function: var(--color-green-darker);
  --color-code-token__variable: oklch(40% 0.02 145);
  --color-code-token__punctuation: var(--color-gray);

  /* ===== 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;
  --textarea-min-height: 8rem;
  --progress-height: 0.5rem;
  --progress-height-lg: 0.75rem;
  --progress-height-sm: 0.25rem;
  --status-dot-size: 0.5rem;

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

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 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);

  /* Tray/sidebar sizing - fluid on desktop, minimal on mobile */
  --tray-size: clamp(12rem, 25dvw, 24rem);

  @media (max-width: 799px) {
    --tray-size: 0;
  }

  /* 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 145;

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

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

  --lch-purple-lightest: 25% 0.04 287;
  --lch-purple-lighter: 32% 0.06 287;
  --lch-purple-light: 45% 0.12 287;
  --lch-purple: 70% 0.16 287;
  --lch-purple-dark: 80% 0.12 287;
  --lch-purple-darker: 90% 0.08 287;

  --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 145;

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

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

    --lch-purple-lightest: 25% 0.04 287;
    --lch-purple-lighter: 32% 0.06 287;
    --lch-purple-light: 45% 0.12 287;
    --lch-purple: 70% 0.16 287;
    --lch-purple-dark: 80% 0.12 287;
    --lch-purple-darker: 90% 0.08 287;

    --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);
  }
}