/**
 * SLIST Design Tokens
 *
 * Single source of truth for colors, typography, spacing, radii, effects, and
 * layout. Every component + template references these variables.
 *
 * Dark mode is the default (:root). Light mode overrides via body.light-mode.
 * Naming: --slist-<category>-<variant>
 *
 * Based on Apple HIG principles: 8pt grid, semantic colors, materials system.
 * See DESIGN.md for full specification.
 */

:root {
	/* ================================================================
	   Colors — Dark Mode (default)
	   ================================================================ */
	--slist-bg:                #000000;
	--slist-fg:                #ffffff;

	/* Primary accent */
	--slist-primary:           #ff0000;
	--slist-primary-hover:     #cc0000;

	/* Surfaces */
	--slist-surface:           #1c1c1e;
	--slist-material:          rgba(255, 255, 255, 0.06);
	--slist-material-thick:    rgba(255, 255, 255, 0.12);

	/* Text hierarchy — opacity-based */
	--slist-text-primary:      #ffffff;
	--slist-text-secondary:    rgba(255, 255, 255, 0.60);
	--slist-text-tertiary:     rgba(255, 255, 255, 0.40);
	--slist-text-quaternary:   rgba(255, 255, 255, 0.25);

	/* Separators */
	--slist-separator:         rgba(255, 255, 255, 0.08);
	--slist-separator-medium:  rgba(255, 255, 255, 0.15);
	--slist-separator-strong:  rgba(255, 255, 255, 0.25);

	/* Semantic colors */
	--slist-success:           #30d158;
	--slist-warning:           #ffd60a;
	--slist-error:             #ff9f0a;

	/* Semantic tints (for badge/container backgrounds) */
	--slist-success-tint:      rgba(48, 209, 88, 0.15);
	--slist-warning-tint:      rgba(255, 214, 10, 0.12);
	--slist-error-tint:        rgba(255, 159, 10, 0.15);

	/* Focus ring */
	--slist-focus-ring:        0 0 0 3px rgba(255, 0, 0, 0.25);
	--slist-error-ring:        0 0 0 3px rgba(255, 159, 10, 0.15);

	/* Shadows */
	--slist-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.25);
	--slist-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.35);
	--slist-shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.45);

	/* ================================================================
	   Typography
	   ================================================================ */
	--slist-font-display:      'Times New Roman', Times, serif;
	--slist-font-body:         'Public Sans', system-ui, -apple-system, sans-serif;
	--slist-font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* Fluid type scale */
	--slist-text-hero:         clamp(3rem, 9vw, 5rem);
	--slist-text-display:      clamp(2rem, 5vw, 3rem);
	--slist-text-title1:       clamp(1.5rem, 3vw, 2rem);
	--slist-text-title2:       clamp(1.25rem, 2.5vw, 1.5rem);
	--slist-text-title3:       clamp(1.1rem, 2vw, 1.25rem);
	--slist-text-body:         clamp(0.9375rem, 1.2vw, 1.0625rem);
	--slist-text-callout:      clamp(0.8125rem, 1vw, 0.9375rem);
	--slist-text-caption:      clamp(0.6875rem, 0.8vw, 0.8125rem);
	--slist-text-eyebrow:      clamp(0.6875rem, 0.8vw, 0.75rem);

	/* Weights */
	--slist-weight-regular:    400;
	--slist-weight-medium:     500;
	--slist-weight-semibold:   600;
	--slist-weight-bold:       700;

	/* Line heights */
	--slist-lh-tight:          1.0;
	--slist-lh-snug:           1.15;
	--slist-lh-default:        1.5;
	--slist-lh-relaxed:        1.6;

	/* Letter spacing */
	--slist-ls-tight:          -0.02em;
	--slist-ls-snug:           -0.01em;
	--slist-ls-none:           0;
	--slist-ls-wide:           0.04em;
	--slist-ls-wider:          0.06em;

	/* ================================================================
	   Spacing — 8pt grid
	   ================================================================ */
	--slist-space-1:           0.25rem;   /* 4px  */
	--slist-space-2:           0.5rem;    /* 8px  */
	--slist-space-3:           1rem;      /* 16px */
	--slist-space-4:           1.5rem;    /* 24px */
	--slist-space-5:           2rem;      /* 32px */
	--slist-space-6:           2.5rem;    /* 40px */
	--slist-space-7:           3rem;      /* 48px */
	--slist-space-8:           4rem;      /* 64px */
	--slist-space-9:           5rem;      /* 80px */
	--slist-space-10:          6rem;      /* 96px */

	/* ================================================================
	   Border radius
	   ================================================================ */
	--slist-radius-sm:         6px;
	--slist-radius-md:         10px;
	--slist-radius-lg:         16px;
	--slist-radius-xl:         24px;
	--slist-radius-pill:       999px;

	/* ================================================================
	   Materials (backdrop-filter)
	   ================================================================ */
	--slist-blur:              blur(20px) saturate(150%);
	--slist-blur-thick:        blur(24px) saturate(160%);

	/* ================================================================
	   Layout
	   ================================================================ */
	--slist-content-default:   680px;
	--slist-content-wide:      1120px;
	--slist-content-max:       1440px;
	--slist-header-height:     64px;

	/* ================================================================
	   Transitions
	   ================================================================ */
	--slist-transition-fast:   150ms ease;
	--slist-transition-default: 250ms ease;
	--slist-transition-slow:   400ms ease;

	/* ================================================================
	   Z-index
	   ================================================================ */
	--slist-z-base:            1;
	--slist-z-header:          50;
	--slist-z-sticky:          100;
	--slist-z-overlay:         200;
}

/* ================================================================
   Light Mode Overrides
   ================================================================ */
.light-mode {
	--slist-bg:                #ffffff;
	--slist-fg:                #1d1d1f;

	--slist-surface:           #f2f2f7;
	--slist-material:          rgba(0, 0, 0, 0.03);
	--slist-material-thick:    rgba(0, 0, 0, 0.06);

	--slist-text-primary:      #1d1d1f;
	--slist-text-secondary:    rgba(0, 0, 0, 0.55);
	--slist-text-tertiary:     rgba(0, 0, 0, 0.35);
	--slist-text-quaternary:   rgba(0, 0, 0, 0.20);

	--slist-separator:         rgba(0, 0, 0, 0.06);
	--slist-separator-medium:  rgba(0, 0, 0, 0.12);
	--slist-separator-strong:  rgba(0, 0, 0, 0.20);

	--slist-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.08);
	--slist-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.12);
	--slist-shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.18);
}