/* ═══════════════════════════════════════
   BEDROCK GRAPHICS — SERAPHIC UI TOKENS
═══════════════════════════════════════ */

/* ─── DARK THEME (Default) ─── */
:root {
  /* Primary — Amber/Gold */
  --primary:              #FFB700;
  --on-primary:           #3D2600;
  --primary-container:    #563A00;
  --on-primary-container: #FFDEA0;

  /* Secondary */
  --secondary:              #D8C49D;
  --on-secondary:           #3A2E16;
  --secondary-container:    #51442A;
  --on-secondary-container: #F5E0BB;

  /* Tertiary — Sage green accent */
  --tertiary:              #A6CFA9;
  --on-tertiary:           #133717;
  --tertiary-container:    #2A4E2C;
  --on-tertiary-container: #C2EBC4;

  /* Error */
  --error:              #FFB4AB;
  --on-error:           #690005;
  --error-container:    #93000A;
  --on-error-container: #FFDAD6;

  /* Success */
  --success:              #6DD58C;
  --on-success:           #003919;
  --success-container:    #005227;
  --on-success-container: #89F4A7;

  /* Warning */
  --warning:              #FFB770;
  --on-warning:           #4A2800;
  --warning-container:    #693D00;
  --on-warning-container: #FFDBB8;

  /* Surface scale */
  --surface-lowest:   #100E09;
  --surface-low:      #1E1B13;
  --surface:          #16130E;
  --surface-container:      #221F17;
  --surface-container-high: #2D291F;
  --surface-highest:        #38342A;

  /* On-surface text */
  --on-surface:         #EDE0D0;
  --on-surface-variant: #D2C4B0;

  /* Outline */
  --outline:         #9B8F7F;
  --outline-variant: #4E4539;

  /* Inverse */
  --inverse-surface:    #EDE0D0;
  --inverse-on-surface: #342F23;
  --inverse-primary:    #725B00;

  /* Scrim */
  --scrim: rgba(0, 0, 0, 0.6);

  /* ─── SHAPE ─── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ─── SPACING ─── */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── TYPOGRAPHY ─── */
  --font-display: 'Google Sans Display', 'Google Sans', sans-serif;
  --font-sans:    'Google Sans', sans-serif;
  --font-body:    'Noto Sans', sans-serif;

  --text-display-xl: 72px;
  --text-display:    56px;
  --text-headline-lg: 40px;
  --text-headline:    32px;
  --text-title-lg:    22px;
  --text-title:       18px;
  --text-body-lg:     16px;
  --text-body:        14px;
  --text-label-lg:    13px;
  --text-label:       11px;

  /* ─── MOTION ─── */
  --duration-short:  150ms;
  --duration-medium: 300ms;
  --duration-long:   450ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-enter:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-exit:     cubic-bezier(0.4, 0.0, 1, 1);

  /* ─── ELEVATION (tonal glow overlay) ─── */
  --elevation-1: rgba(255, 183, 0, 0.05);
  --elevation-2: rgba(255, 183, 0, 0.08);
  --elevation-3: rgba(255, 183, 0, 0.11);

  /* ─── SECTION PADDING ─── */
  --section-pad: var(--space-20);

  /* ─── SEMANTIC ALIAS ─── */
  --background: var(--surface);
}

/* ─── LIGHT THEME ─── */
[data-theme="light"] {
  --primary:              #725B00;
  --on-primary:           #FFFFFF;
  --primary-container:    #FFDEA0;
  --on-primary-container: #241A00;

  --secondary:              #6A5D3F;
  --on-secondary:           #FFFFFF;
  --secondary-container:    #F5E0BB;
  --on-secondary-container: #241A04;

  --tertiary:              #3B6940;
  --on-tertiary:           #FFFFFF;
  --tertiary-container:    #C2EBC4;
  --on-tertiary-container: #002109;

  --error:              #BA1A1A;
  --on-error:           #FFFFFF;
  --error-container:    #FFDAD6;
  --on-error-container: #410002;

  --success:              #006D2F;
  --on-success:           #FFFFFF;
  --success-container:    #89F4A7;
  --on-success-container: #002109;

  --warning:              #7B5800;
  --on-warning:           #FFFFFF;
  --warning-container:    #FFDBB8;
  --on-warning-container: #271900;

  --surface-lowest:   #FFFFFF;
  --surface-low:      #FAF3E7;
  --surface:          #FFF8F0;
  --surface-container:      #F4EDE1;
  --surface-container-high: #EEE7DB;
  --surface-highest:        #E8E1D6;

  --on-surface:         #1F1B13;
  --on-surface-variant: #4E4539;

  --outline:         #807565;
  --outline-variant: #D2C4B0;

  --inverse-surface:    #342F23;
  --inverse-on-surface: #FAF0E4;
  --inverse-primary:    #FFB700;

  --scrim: rgba(0, 0, 0, 0.35);

  --elevation-1: rgba(114, 91, 0, 0.05);
  --elevation-2: rgba(114, 91, 0, 0.08);
  --elevation-3: rgba(114, 91, 0, 0.11);

  /* ─── SEMANTIC ALIAS ─── */
  --background: var(--surface);
}

/* ─── RESPONSIVE SECTION PADDING ─── */
@media (max-width: 1024px) { :root { --section-pad: var(--space-12); } }
@media (max-width: 640px)  { :root { --section-pad: var(--space-6); } }