/* ==========================================================================
   tokens.css — design tokens for amir.codes
   The site is dark only. Every colour is a custom property; body always
   has an explicit background.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Palette (dark) ---------------------------------------------------- */
  --bg:            #070A12;
  --surface:       #0B1020;
  --surface-2:     #121A2E;
  --surface-3:     #1B2540;
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.14);
  --text:          #F3F5FA;
  --text-2:        rgba(243, 245, 250, 0.68);
  --text-3:        rgba(243, 245, 250, 0.52);
  --ghost:         rgba(243, 245, 250, 0.12);   /* the welcome: the name before it is typed */
  --brand:         #4F8CFF;
  --brand-press:   #2F6BF0;
  --on-brand:      #FFFFFF;
  --brand-fill:    #2F6BF0;   /* filled buttons: 4.7:1 with white text */
  --brand-fill-press: #2459D6;
  --accent:        #7CF0FF;
  --success:       #34D399;
  --bmc:           #FFDD00;
  --on-bmc:        #0B1020;
  --spot:          rgba(79, 140, 255, 0.26);
  --disc-a:        rgba(79, 140, 255, 0.10);
  --disc-b:        rgba(124, 240, 255, 0.06);
  --grain-opacity: 0.035;

  /* ---- Materials (translucency encodes hierarchy) ----------------------- */
  --mat-chrome-bg:     rgba(11, 16, 32, 0.62);
  --mat-chrome-solid:  rgba(11, 16, 32, 0.76);
  --mat-chrome-blur:   blur(24px) saturate(160%);
  --mat-chrome-edge:   rgba(255, 255, 255, 0.12);
  --mat-chrome-shadow: 0 12px 40px rgba(0, 0, 0, 0.40);

  --mat-thick-bg:      rgba(11, 16, 32, 0.74);
  --mat-thick-solid:   rgba(11, 16, 32, 0.88);
  --mat-thick-card:    rgba(255, 255, 255, 0.14);
  --mat-thick-card-solid: rgba(30, 36, 56, 0.92);
  --mat-thick-blur:    blur(40px) saturate(160%);
  --mat-thick-edge:    rgba(255, 255, 255, 0.22);
  --mat-thick-shadow:  0 -20px 60px rgba(0, 0, 0, 0.5);

  --mat-thin-bg:       rgba(255, 255, 255, 0.06);
  --mat-thin-hover:    rgba(255, 255, 255, 0.10);
  --mat-thin-blur:     blur(12px);

  --scrim:             rgba(3, 5, 10, 0.45);

  /* ---- Type ------------------------------------------------------------- */
  --font-sans:    system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Inter Fallback", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display-xl: clamp(3.5rem, 12vw, 11rem);
  --fs-display-l:  clamp(2.75rem, 7.5vw, 6.5rem);
  --fs-display-m:  clamp(2.25rem, 5vw, 4rem);
  --fs-headline:   1.75rem;
  --fs-title:      1.25rem;
  --fs-body-l:     1.125rem;
  --fs-body:       1rem;
  --fs-caption:    0.8125rem;
  --fs-label:      0.75rem;
  --fs-readout:    0.6875rem;

  /* ---- Spacing / radii / layout ----------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;
  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* and clear of a notch, sideways */
  --rail: 216px;      /* the desktop rail, ≥1200px */
  --max: 1280px;
  --section-y: 96px;

  --r-chip: 6px; --r-btn: 12px; --r-card: 20px; --r-sheet: 28px; --r-pill: 32px; --r-round: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-device: 0 60px 120px -40px rgba(0, 0, 0, 0.75), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  --shadow-card:   inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -30px rgba(0, 0, 0, 0.6);
  --glow-primary:  0 8px 30px -10px rgba(79, 140, 255, 0.6);

  /* ---- Z layers --------------------------------------------------------- */
  --z-atmos: -1; --z-grain: 1; --z-page: 2; --z-nav: 20;
  --z-scrim: 30; --z-sheet: 31; --z-welcome: 40; --z-toast: 50;

  /* ---- CSS motion fallbacks (one-shot, never on anything grabbable) ---- */
  --t-fast: 120ms; --t-base: 240ms; --t-slow: 480ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring: 2px;
}

@media (min-width: 600px)  { :root { --gutter: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }
@media (min-width: 1024px) { :root { --gutter: max(48px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --section-y: 128px; } }

/* Mobile display sizes (the phone layout is < 1024px) */
@media (max-width: 1023.98px) {
  :root {
    --fs-display-xl: clamp(3.25rem, 15vw, 7rem);
    --fs-display-l:  clamp(2.5rem, 11vw, 5rem);
    --fs-headline:   1.375rem;
  }
}

/* ---- Preference overrides ------------------------------------------------ */
/* Reduced transparency: frost every material solid, drop the blur. */
:root[data-transparency="reduced"] {
  --mat-chrome-bg:    var(--mat-chrome-solid);
  --mat-chrome-blur:  none;
  --mat-thick-bg:     var(--mat-thick-solid);
  --mat-thick-card:   var(--mat-thick-card-solid);
  --mat-thick-blur:   none;
  --mat-thin-bg:      var(--surface-2);
  --mat-thin-blur:    none;
}
/* More contrast: solid surfaces, defined borders, brighter secondary text. */
:root[data-contrast="more"] {
  --text-2:           rgba(243, 245, 250, 0.84);
  --text-3:           rgba(243, 245, 250, 0.72);
  --line:             rgba(255, 255, 255, 0.40);
  --line-strong:      rgba(255, 255, 255, 0.55);
  --mat-chrome-bg:    var(--surface);
  --mat-chrome-blur:  none;
  --mat-thick-bg:     var(--surface);
  --mat-thick-card:   var(--surface-2);
  --mat-thick-blur:   none;
  --mat-thin-bg:      var(--surface-2);
  --mat-thin-blur:    none;
  --grain-opacity:    0;
  --focus-ring:       3px;
}