/* =============================================================================
   Boswell — canonical design tokens
   Source of truth for both Jinja templates and room-ui Vite bundle.
   room-ui/src/styles/tokens.css is GENERATED from this file via prebuild.
   Do not edit the generated copy.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Personal theme (default)
   Phase 2: reproduces the current EP-ish visual exactly — no appearance change.
   Phase 3 will replace these values with the real igorschwarzmann-design palette
   (dark mode, Volt accents, Syne + IBM Plex).
   ----------------------------------------------------------------------------- */
:root,
[data-theme="personal"] {
  /* Palette (Phase 2 placeholders — current EP-ish values) */
  --color-night:        #0A0A0A;
  --color-white:        #FFFFFF;

  /* Semantic tokens — background */
  --color-bg:           #FFFFFF;
  --color-bg-elevated:  #FAFAF8;
  --color-bg-surface:   #F5F5F0;
  --color-bg-hover:     #EDEDEA;

  /* Semantic tokens — foreground / text */
  --color-fg:           #0A0A08;
  --color-fg-muted:     #2A2A26;
  --color-fg-strong:    #0A0A08;
  --color-fg-dim:       rgba(10, 10, 8, 0.32);

  /* Semantic tokens — brand / CTA */
  --color-brand:        #1400FF;
  --color-cta:          #1400FF;
  --color-cta-fg:       #FFFFFF;
  --color-cta-hover:    #4d3dff;
  --color-cta-subtle:   rgba(20, 0, 255, 0.06);
  --color-cta-glow:     rgba(20, 0, 255, 0.12);
  --color-cta-low:      rgba(20, 0, 255, 0.25);

  /* Semantic tokens — links */
  --color-link:         #1400FF;
  --color-link-hover:   #4d3dff;
  --color-link-subtle:  rgba(20, 0, 255, 0.06);
  --color-link-bg:      rgba(20, 0, 255, 0.06);

  /* Semantic tokens — borders */
  --color-border:       rgba(10, 10, 8, 0.1);
  --color-border-accent: rgba(20, 0, 255, 0.3);

  /* Semantic tokens — focus */
  --color-focus:        #1400FF;

  /* Semantic tokens — status */
  --color-success:      #22c55e;
  --color-success-bg:   rgba(34, 197, 94, 0.08);
  --color-warning:      #eab308;
  --color-warning-bg:   rgba(234, 179, 8, 0.08);
  --color-error:        #ef4444;
  --color-error-bg:     rgba(239, 68, 68, 0.08);
  --color-info:         #3b82f6;
  --color-info-bg:      rgba(59, 130, 246, 0.08);

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', monospace;
  --weight-display: 700;
  --weight-body:    400;

  /* Geometry */
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      8px;
  --radius-form:    4px;
  --radius-default: 4px;
  --radius-pill:    999px; /* EP-OK: EP block sets --radius-pill: 0 */

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Easing */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Overlay (for audio-gate) */
  --color-overlay: rgba(255, 255, 255, 0.85);
}

/* -----------------------------------------------------------------------------
   EP theme
   Phase 2: placeholder values matching spec Token Inventory.
   EP rendering will look imperfect until Phase 4 completes the overrides.
   ----------------------------------------------------------------------------- */
[data-theme="ep"] {
  /* Palette — ink, paper, alloy */
  --color-ink:          #0A0A08;
  --color-ink-sec:      #2A2A26;
  --color-paper:        #FFFFFF;
  --color-alloy:        #8A8C82;
  --color-alloy-light:  #C4C5BB;
  --color-alloy-deep:   #4A4C45;

  /* Palette — anodised power family */
  --color-anod-violet:        #6B1A8E;
  --color-anod-violet-rim:    rgba(107, 26, 142, 0.4);
  --color-anod-violet-shadow: rgba(107, 26, 142, 0.2);
  --color-anod-blue:          #00C8F0;
  --color-anod-green:         #2DE070;

  /* Palette — signal blue (link-only) */
  --color-signal: #1400FF;

  /* Semantic tokens — background */
  --color-bg:           #FFFFFF;
  --color-bg-elevated:  #FFFFFF;
  --color-bg-surface:   #FFFFFF;
  --color-bg-hover:     rgba(10, 10, 8, 0.04);

  /* Semantic tokens — foreground / text */
  --color-fg:           #0A0A08;
  --color-fg-muted:     #2A2A26;
  --color-fg-strong:    #0A0A08;
  --color-fg-dim:       rgba(10, 10, 8, 0.32);

  /* Semantic tokens — brand / CTA */
  --color-brand:        #6B1A8E;
  --color-cta:          transparent;
  --color-cta-fg:       #0A0A08;
  --color-cta-hover:    #0A0A08;
  --color-cta-subtle:   rgba(107, 26, 142, 0.06);
  --color-cta-glow:     rgba(0, 0, 0, 0);
  --color-cta-low:      rgba(0, 0, 0, 0);

  /* Semantic tokens — links (signal blue is link-only under EP) */
  --color-link:         #1400FF;
  --color-link-hover:   #4d3dff;
  --color-link-subtle:  rgba(20, 0, 255, 0.06);
  --color-link-bg:      rgba(20, 0, 255, 0.06);

  /* Semantic tokens — borders */
  --color-border:       #C4C5BB;
  --color-border-accent: #6B1A8E;

  /* Semantic tokens — focus */
  --color-focus:        #6B1A8E;

  /* Semantic tokens — status */
  --color-success:      #22c55e;
  --color-success-bg:   rgba(34, 197, 94, 0.08);
  --color-warning:      #eab308;
  --color-warning-bg:   rgba(234, 179, 8, 0.08);
  --color-error:        #ef4444;
  --color-error-bg:     rgba(239, 68, 68, 0.08);
  --color-info:         #3b82f6;
  --color-info-bg:      rgba(59, 130, 246, 0.08);

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', monospace;
  --weight-display: 700;
  --weight-body:    400;

  /* Geometry — square corners by default under EP */
  --radius-sm:      0;
  --radius-md:      0;
  --radius-lg:      0;
  --radius-form:    4px;
  --radius-default: 0;
  --radius-pill:    0;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Easing */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Grain — from canonical EP system */
  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='gp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23gp)' opacity='0.045'/%3E%3C/svg%3E");
  --grain-70-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='gff'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='720' height='720' filter='url(%23gff)' opacity='0.42'/%3E%3C/svg%3E");
  --grain-70-coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='gcc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.30' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0.06  0 0.92 0 0 0.02  0 0 0.85 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='720' height='720' filter='url(%23gcc)' opacity='0.24'/%3E%3C/svg%3E");
  --grain-70-scatter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='gss'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.10' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23gss)' opacity='0.14'/%3E%3C/svg%3E");

  /* Inner-rim shadow for anodised bands */
  --rim-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.14),
    inset 0 3px 10px rgba(0,0,0,0.16),
    inset 0 -2px 8px rgba(0,0,0,0.20);

  /* Anodised rim tokens (fuller set) */
  --color-anod-violet-rim:    #B25EC8;
  --color-anod-violet-shadow: #2A0A3A;
  --color-overlay: rgba(255, 255, 255, 0.85);
}

/* -----------------------------------------------------------------------------
   Ember theme
   Temporary pilot (2026-05-15, ~few weeks). Uses ABC Walter Neue (self-hosted,
   see /static/css/fonts.css) and a custom greyscale palette supplied by client.
   Otherwise inherits the personal theme's brand/CTA/status palette.
   ----------------------------------------------------------------------------- */
[data-theme="ember"] {
  /* Greyscale (client palette) */
  --color-grey-1000: #111313;
  --color-grey-800:  #4B5353;
  --color-grey-600:  #CCD1D1;
  --color-grey-500:  #D8DCDC;
  --color-grey-100:  #F4F5F5;
  --color-grey-0:    #FFFFFF;

  --color-night:        #111313;
  --color-white:        #FFFFFF;

  /* Semantic tokens — background */
  --color-bg:           #FFFFFF;
  --color-bg-elevated:  #F4F5F5;
  --color-bg-surface:   #F4F5F5;
  --color-bg-hover:     #D8DCDC;

  /* Semantic tokens — foreground / text */
  --color-fg:           #111313;
  --color-fg-muted:     #4B5353;
  --color-fg-strong:    #111313;
  --color-fg-dim:       rgba(17, 19, 19, 0.32);

  /* Semantic tokens — brand / CTA (inherited from personal theme) */
  --color-brand:        #1400FF;
  --color-cta:          #1400FF;
  --color-cta-fg:       #FFFFFF;
  --color-cta-hover:    #4d3dff;
  --color-cta-subtle:   rgba(20, 0, 255, 0.06);
  --color-cta-glow:     rgba(20, 0, 255, 0.12);
  --color-cta-low:      rgba(20, 0, 255, 0.25);

  /* Semantic tokens — links */
  --color-link:         #1400FF;
  --color-link-hover:   #4d3dff;
  --color-link-subtle:  rgba(20, 0, 255, 0.06);
  --color-link-bg:      rgba(20, 0, 255, 0.06);

  /* Semantic tokens — borders */
  --color-border:       rgba(17, 19, 19, 0.1);
  --color-border-accent: rgba(20, 0, 255, 0.3);

  /* Semantic tokens — focus */
  --color-focus:        #1400FF;

  /* Semantic tokens — status */
  --color-success:      #22c55e;
  --color-success-bg:   rgba(34, 197, 94, 0.08);
  --color-warning:      #eab308;
  --color-warning-bg:   rgba(234, 179, 8, 0.08);
  --color-error:        #ef4444;
  --color-error-bg:     rgba(239, 68, 68, 0.08);
  --color-info:         #3b82f6;
  --color-info-bg:      rgba(59, 130, 246, 0.08);

  /* Typography — self-hosted, see /static/css/fonts.css */
  --font-display: 'ABC Walter Neue', system-ui, sans-serif;
  --font-body:    'ABC Walter Neue', system-ui, sans-serif;
  --font-mono:    'Space Mono', monospace;
  --weight-display: 700;
  --weight-body:    400;

  /* Geometry */
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      8px;
  --radius-form:    4px;
  --radius-default: 4px;
  --radius-pill:    999px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Easing */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Overlay (for audio-gate) */
  --color-overlay: rgba(255, 255, 255, 0.85);
}