/*
 * Design Tokens — CSS Custom Properties
 * Smoked graphite glass — semantic material and interaction system
 */

:root, :host {
  /* ─── COLOR PALETTES ────────────────────────────── */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;
  --amber-950: #451a03;

  --red-400:   #f87171;
  --red-500:   #ef4444;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --blue-400:  #60a5fa;
  --blue-500:  #3b82f6;

  /* ─── SEMANTIC: SURFACES ────────────────────────── */
  --surface-base: #121212;
  --surface-panel: #191919;
  --surface-elevated: #252525;
  --surface-popover: #202020;
  --surface-input: #141414;
  --surface-hover:     rgba(255, 255, 255, 0.06);
  --surface-active:    rgba(255, 255, 255, 0.1);
  --surface-selected: #383029;
  --surface-selected-subtle: #2c2621;

  --backdrop-overlay:  rgba(10, 10, 10, 0.6);

  /* ─── SEMANTIC: TEXT ────────────────────────────── */
  --text-primary:      var(--neutral-50);
  --text-secondary:    var(--neutral-300);
  --text-muted: #ababab;
  --text-disabled: #858585;
  --text-inverse:      var(--neutral-950);
  --text-accent: #ffc083;
  --text-destructive: #edaaaa;
  --text-success: #a9c9ae;
  --text-warning: #dfbd83;
  --text-info: var(--text-secondary);

  /* Quiet icon actions share these states in panels, menus and floating tools. */
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: var(--surface-hover);
  --button-ghost-bg-active: var(--surface-active);
  --button-ghost-border: transparent;
  --button-ghost-border-hover: var(--border-strong);
  --button-ghost-text: var(--text-secondary);
  --button-ghost-text-hover: var(--text-primary);
  --button-disabled-bg: transparent;
  --button-disabled-border: transparent;
  --button-disabled-text: var(--text-disabled);

  /* ─── SEMANTIC: BORDERS ─────────────────────────── */
  --border-subtle:     rgba(255, 255, 255, 0.05);
  --border-standard:   rgba(255, 255, 255, 0.1);
  --border-strong:     rgba(255, 255, 255, 0.2);
  /* The boundary of a field or select must reach 3:1 against what it sits on (WCAG 1.4.11): 3.2:1 on elevated, 3.6:1 on panel. */
  --border-control:       #727272;
  --border-control-hover: #8f8f8f;
  --border-focus: var(--accent);
  --border-selected: #b97f43;

  /* ─── TYPOGRAPHY ────────────────────────────────── */
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 12px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ─── SPACING ───────────────────────────────────── */
  --space-half: 2px; /* optical nudges and hairline gaps only */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ─── SIZING ────────────────────────────────────── */
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;
  --control-xl: 56px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;

  /* ─── RADII ─────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ─── SHADOWS ───────────────────────────────────── */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, .24);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .28);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .34);
  --shadow-floating: 0 16px 40px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .24);
  --shadow-focus: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--border-focus);
  --shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, .32);

  /* Material primitives. Solid surfaces remain the readable fallbacks. */
  --accent: #ffab5c;
  --accent-hover: #ffbd80;
  --accent-pressed: #ee984d;
  --accent-glow: rgba(255, 157, 66, .14);
  --edge-dark: rgba(0, 0, 0, .4); /* a 1px dark edge that separates a floating card from any page */
  --surface-glass: rgba(27, 27, 27, .94);
  --surface-glass-strong: rgba(24, 24, 24, .97);
  --surface-glass-floating: rgba(30, 30, 30, .94);
  --border-glass: rgba(255, 255, 255, .16);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .24);
  --glass-reflection: linear-gradient(155deg, rgba(255, 255, 255, .045), transparent 38%, rgba(255, 255, 255, .012));
  --active-reflection: linear-gradient(145deg, rgba(255, 171, 92, .09), transparent 65%);
  --accent-reflection: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 65%);
  --environment-light: radial-gradient(ellipse at 95% 0%, rgba(255, 157, 66, .055), transparent 48%), linear-gradient(160deg, #1a1a1a, #121212 65%);
  --shadow-active: inset 0 1px 0 rgba(255, 193, 135, .16), 0 2px 12px var(--accent-glow);
  --glass-blur-sm: 8px;
  --glass-blur-md: 14px;
  --glass-blur-lg: 18px;
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-floating: var(--radius-xl);

  /* Only opacity/transform animate on entry; no moving blur or lighting. */
  --motion-micro: 90ms;
  --motion-state: 160ms;
  --motion-panel: 220ms;
  --ease-fluid: cubic-bezier(.2, .7, .2, 1);
  --transition-fast: var(--motion-state) var(--ease-fluid);
  --transition-smooth: var(--motion-panel) var(--ease-fluid);

  --space-16: 64px;
  --accent-indicator: var(--accent);
  --surface-success: #253129;
  --surface-error: #382727;
  --surface-warning: #342e23;
  --color-bg-error: var(--surface-error);
  --color-bg-warning: var(--surface-warning);
  --color-bg-info: var(--surface-elevated);
  --color-feedback-high-border: var(--text-warning);
  --color-feedback-high-dark: var(--text-warning);
  --color-feedback-high-light: var(--surface-warning);
  --color-feedback-high-subtle: var(--surface-warning);
  --font-family-mono: var(--font-mono);
  /* ─── TONAL BUTTON ──────────────────────────────── */
  /* The accent at low strength: for an AI action inside a card, next to the view's one filled primary button. Text 7.9:1
     (6.8:1 hover) on its fill; the border marks the boundary at 3.7:1. */
  --button-tonal-bg: #3d3127;
  --button-tonal-bg-hover: #483a2e;
  --button-tonal-bg-pressed: #33291f;
  --button-tonal-border: var(--border-selected);
  --button-tonal-text: var(--text-accent);
  /* ─── CODE SYNTAX (hover card, prompts) ─────────── */
  /* A dark editor theme: a near-black canvas and saturated hues, 7:1 or more on it (comments 6.3:1), told apart by hue, not by
     lightness alone. The selector keeps the brand orange. */
  --syntax-surface: #0d0e11;
  --syntax-border: #2a2d34;
  --syntax-selector: #ffb454;
  --syntax-property: #6cb6ff;
  --syntax-number: #7ee787;
  --syntax-string: #e2a8ff;
  --syntax-keyword: #ff7b72;
  --syntax-punctuation: #e6edf3;
  --syntax-comment: #8b949e;
  /* ─── Z-INDEX ───────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-popover: 300;
  --z-tooltip: 400;
}