/**
 * Two-tier semantic CSS design tokens strictly implementing Stolon style-guide.md (§1)
 * Semantic variables consume primitives and support light and dark modes with zero FOUT.
 */

:root {
  /* =========================================================================
     1. Primitive Palette (:root)
     ========================================================================= */
  --app-grey-50: #ffffff;
  --app-grey-100: #fafafa;
  --app-grey-200: #f5f5f5;
  --app-grey-300: #ededed;
  --app-grey-400: #e5e5e5;
  --app-grey-500: #d4d4d4;
  --app-grey-600: #a3a3a3;
  --app-grey-700: #737373;
  --app-grey-800: #525252;
  --app-grey-900: #262626;
  --app-grey-950: #171717;
  --app-grey-1000: #0f0f0f;
  --app-grey-1100: #0a0a0a;
  --app-grey-1200: #000000;

  --app-alpha-dark-10: rgba(0, 0, 0, 0.04);
  --app-alpha-dark-20: rgba(0, 0, 0, 0.08);
  --app-alpha-dark-30: rgba(0, 0, 0, 0.12);
  --app-alpha-dark-40: rgba(0, 0, 0, 0.18);
  --app-alpha-dark-50: rgba(0, 0, 0, 0.28);

  --app-alpha-light-10: rgba(255, 255, 255, 0.04);
  --app-alpha-light-20: rgba(255, 255, 255, 0.08);
  --app-alpha-light-30: rgba(255, 255, 255, 0.14);
  --app-alpha-light-40: rgba(255, 255, 255, 0.22);
  --app-alpha-light-50: rgba(255, 255, 255, 0.32);

  /* Subtle Organic Accent: Muted Sage / Moss */
  --app-accent-organic-100: #f2f5f3;
  --app-accent-organic-200: #e3eae5;
  --app-accent-organic-600: #4a6755;
  --app-accent-organic-700: #385042;
  --app-accent-organic-900: #1f2e25;

  /* Typography Stacks */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* =========================================================================
     2. Semantic Tokens (Light Mode Default)
     ========================================================================= */
  --app-background-bg-deep: var(--app-grey-200);
  --app-background-bg-base: var(--app-grey-50);
  --app-background-bg-layer-01: var(--app-grey-100);
  --app-background-bg-layer-02: var(--app-grey-200);
  --app-background-bg-inverse: var(--app-grey-1000);
  --app-background-bg-button-neutral: var(--app-grey-50);
  --app-background-bg-button-contrast: var(--app-grey-1000);

  --app-text-text-primary: var(--app-grey-1000);
  --app-text-text-secondary: var(--app-grey-800);
  --app-text-text-muted: var(--app-grey-700);
  --app-text-text-inverse: var(--app-grey-50);

  --app-border-border-muted: var(--app-alpha-dark-20);
  --app-border-border-base: var(--app-alpha-dark-30);
  --app-border-border-strong: var(--app-alpha-dark-50);
  --app-border-border-focus: var(--app-grey-1000);
  --app-border-border-inverse: var(--app-grey-1000);

  --site-accent: var(--app-accent-organic-600);
  --site-accent-bg: var(--app-accent-organic-100);

  /* Multi-stop elevations */
  --app-elevation-elements: 0 1px 2px rgba(0, 0, 0, 0.04);
  --app-elevation-raised: 0 0 0 1px var(--app-border-border-muted), 0 2px 8px rgba(0, 0, 0, 0.04);
  --app-elevation-floating: 0 0 0 1px var(--app-border-border-muted), 0 8px 24px rgba(0, 0, 0, 0.08);
  --app-elevation-overlay: 0 0 0 1px var(--app-border-border-muted), 0 24px 48px -12px rgba(0, 0, 0, 0.16);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* =========================================================================
   3. Semantic Tokens (Dark Mode Override)
   ========================================================================= */
html[data-color-scheme="dark"] {
  --app-background-bg-deep: var(--app-grey-1100);
  --app-background-bg-base: var(--app-grey-1000);
  --app-background-bg-layer-01: var(--app-grey-950);
  --app-background-bg-layer-02: var(--app-grey-900);
  --app-background-bg-inverse: var(--app-grey-100);
  --app-background-bg-button-neutral: var(--app-grey-900);
  --app-background-bg-button-contrast: var(--app-grey-100);

  --app-text-text-primary: var(--app-grey-100);
  --app-text-text-secondary: var(--app-grey-600);
  --app-text-text-muted: var(--app-grey-700);
  --app-text-text-inverse: var(--app-grey-1000);

  --app-border-border-muted: var(--app-alpha-light-20);
  --app-border-border-base: var(--app-alpha-light-30);
  --app-border-border-strong: var(--app-alpha-light-50);
  --app-border-border-focus: var(--app-grey-100);
  --app-border-border-inverse: var(--app-grey-100);

  --site-accent: #7fa88d;
  --site-accent-bg: var(--app-accent-organic-900);

  --app-elevation-elements: 0 1px 2px rgba(0, 0, 0, 0.4);
  --app-elevation-raised: 0 0 0 1px var(--app-border-border-muted), 0 2px 8px rgba(0, 0, 0, 0.4);
  --app-elevation-floating: 0 0 0 1px var(--app-border-border-muted), 0 8px 24px rgba(0, 0, 0, 0.6);
  --app-elevation-overlay: 0 0 0 1px var(--app-border-border-muted), 0 24px 48px -12px rgba(0, 0, 0, 0.8);
}