/* ================================================================
   Global Stylesheet - Loaded first (via _ prefix)
   Declares CSS layers and contains global variables & base styles
   ================================================================ */

/* Define cascade layers - order matters! */
@layer reset, base, components, layouts, utilities;

/* ================================================================
   CSS Custom Properties (Variables)
   ================================================================ */

:root {
  /* ----------------------------------------------------------------
     Raw palette (OKLCh)
     Existing variable names preserved for backward compatibility.
     ---------------------------------------------------------------- */

  /* Primary */
  --color-primary: oklch(0.50 0.20 264);
  --color-primary-darker: oklch(0.43 0.18 264);
  --color-primary-lighter: oklch(0.58 0.16 264);
  --color-white: oklch(1.00 0 0);
  --color-black: oklch(0.00 0 0);
  --color-blue: oklch(0.50 0.20 264);
  --color-blue-custom: oklch(0.55 0.20 258);
  --color-teal: oklch(0.53 0.12 230);
  --color-orange: oklch(0.72 0.18 55);

  /* Grey scale */
  --color-grey-050: oklch(0.97 0.005 264);
  --color-grey-100: oklch(0.91 0.008 264);
  --color-grey-200: oklch(0.84 0.01 264);
  --color-grey-300: oklch(0.77 0.012 264);
  --color-grey-400: oklch(0.70 0.013 264);
  --color-grey-500: oklch(0.62 0.014 264);
  --color-grey-600: oklch(0.54 0.015 264);
  --color-grey-700: oklch(0.45 0.016 264);
  --color-grey-800: oklch(0.37 0.02 264);
  --color-grey-900: oklch(0.28 0.03 264);

  /* Status */
  --color-green: oklch(0.68 0.18 148);
  --color-green-darker: oklch(0.55 0.16 148);
  --color-amber: oklch(0.80 0.16 85);
  --color-amber-darker: oklch(0.55 0.12 85);
  --color-amber-highlight: oklch(0.78 0.16 85);
  --color-red: oklch(0.65 0.20 30);
  --color-red-darker: oklch(0.52 0.22 28);
  --color-red-recording: oklch(0.38 0.18 25);

  /* Text colors */
  --color-text: oklch(0.32 0.01 264);
  --color-text-muted: oklch(0.50 0.01 264);
  --color-text-light: oklch(0.62 0.01 264);
  --color-text-medium: oklch(0.42 0.01 264);

  /* ----------------------------------------------------------------
     Semantic tokens
     Use these in components. Dark mode overrides only these.
     ---------------------------------------------------------------- */
  --color-ink: var(--color-grey-900);
  --color-ink-muted: var(--color-grey-600);
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-grey-050);
  --color-border: var(--color-grey-200);
  --color-border-strong: var(--color-grey-400);
  --color-link: var(--color-primary);
  --color-accent: var(--color-primary);
  --color-positive: var(--color-green);
  --color-negative: var(--color-red);
  --color-highlight: var(--color-amber-highlight);
  --color-selection: oklch(0.93 0.04 264);

  /* ----------------------------------------------------------------
     RGB channel values (legacy, for existing opacity patterns)
     ---------------------------------------------------------------- */
  --rgb-primary: 18, 97, 241;
  --rgb-grey-200: 199, 203, 209;
  --rgb-grey-600: 106, 114, 126;
  --rgb-grey-900: 37, 47, 64;
  --rgb-teal: 0, 125, 181;
  --rgb-black: 0, 0, 0;
  --rgb-amber: 236, 186, 21;
  --rgb-green: 51, 195, 83;
  --rgb-red: 255, 99, 64;
  --rgb-red-recording: 173, 0, 0;
  --rgb-white: 255, 255, 255;

  /* ----------------------------------------------------------------
     Spacing
     ---------------------------------------------------------------- */
  --space-inline: 1ch;
  --space-inline-half: 0.5ch;
  --space-inline-double: 2ch;
  --space-block: 1rem;
  --space-block-half: 0.5rem;
  --space-block-double: 2rem;

  /* Gutter aliases (legacy) */
  --gutter-default: 24px;
  --gutter-x-large: 20px;
  --gutter-large: 20px;
  --gutter-medium: 16px;
  --gutter-small: 16px;
  --gutter-x-small: 16px;

  /* ----------------------------------------------------------------
     Shared tokens
     ---------------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --shadow-subtle:
    0 1px 1px oklch(0 0 0 / 0.04),
    0 2px 4px oklch(0 0 0 / 0.04),
    0 4px 8px oklch(0 0 0 / 0.02);
  --shadow-raised:
    0 1px 2px oklch(0 0 0 / 0.06),
    0 4px 8px oklch(0 0 0 / 0.06),
    0 8px 16px oklch(0 0 0 / 0.04);
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 2px;
  --radius-pill: 99rem;
  --radius-sm: 0.25rem;

  /* Breakpoints (reference only, use literals in media queries) */
  --breakpoint-x-large: 1439.98px;
  --breakpoint-large: 1199.98px;
  --breakpoint-medium: 991.98px;
  --breakpoint-small: 639.98px;
  --breakpoint-x-small: 399.98px;
}

/* ----------------------------------------------------------------
   Dark mode
   Only semantic tokens are overridden. Components using semantic
   tokens get dark mode automatically.
   ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: oklch(0.93 0.005 264);
    --color-ink-muted: oklch(0.70 0.01 264);
    --color-bg: oklch(0.15 0.02 264);
    --color-bg-subtle: oklch(0.20 0.02 264);
    --color-border: oklch(0.30 0.02 264);
    --color-border-strong: oklch(0.42 0.02 264);
    --color-link: oklch(0.65 0.18 264);
    --color-accent: oklch(0.65 0.18 264);
    --color-positive: oklch(0.72 0.16 148);
    --color-negative: oklch(0.70 0.18 30);
    --color-highlight: oklch(0.75 0.14 85);
    --color-selection: oklch(0.30 0.06 264);

    --shadow-subtle:
      0 1px 1px oklch(0 0 0 / 0.15),
      0 2px 4px oklch(0 0 0 / 0.15),
      0 4px 8px oklch(0 0 0 / 0.10);
    --shadow-raised:
      0 1px 2px oklch(0 0 0 / 0.20),
      0 4px 8px oklch(0 0 0 / 0.20),
      0 8px 16px oklch(0 0 0 / 0.15);
  }
}

/* ================================================================
   Global Base Styles
   ================================================================ */

@layer base {
  /* Text selection */
  ::selection {
    background-color: var(--color-highlight);
    color: var(--color-ink);
  }

  ::-moz-selection {
    background-color: var(--color-highlight);
    color: var(--color-ink);
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Fade-in content */
  body {
    animation: fadein 0.5s;
  }

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Horizontal rule */
  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    height: 0;
    margin: 1rem 0;
    padding: 0;
  }

  /* Details/Summary elements */
  details {
    background: var(--color-bg-subtle);
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
  }

  summary {
    cursor: pointer;

    & > * {
      display: inline;
    }
  }
}