/* ═══════════════════════════════════════════
   Design Tokens — Nihal Gudia
   Single source of truth for the whole site.
   Light (default) · Dark (toggle) · System preference.

   Every page links this file FIRST. Never hardcode a
   colour/shadow anywhere else — add a token here instead.
   ═══════════════════════════════════════════ */

:root {
  /* ── Surface ── */
  --bg:           #F9F7F4;
  --card:         #FFFDFA;

  /* ── Text ── */
  --text:         #1A1A1A;
  --text-soft:    #2A2A2A;  /* long-form body copy */
  --muted:        #6B6B6B;

  /* ── Borders ── */
  --border:       #E5E2DC;
  --border-hover: #D8D4CC;

  /* ── Shadows ── */
  --shadow-sm:    0 10px 30px rgba(26, 26, 26, 0.06);
  --shadow-md:    0 12px 34px rgba(26, 26, 26, 0.08);
  --shadow-play:  0 4px 16px rgba(0, 0, 0, 0.2);

  /* ── Nav ── */
  --nav-gradient: linear-gradient(to bottom, rgba(249, 247, 244, 0.9), rgba(249, 247, 244, 0));

  /* ── Video player ── */
  --play-bg:      rgba(249, 247, 244, 0.92);
  --play-icon:    #1A1A1A;

  /* ── Before / after tags (case studies) ── */
  --tag-before-bg: #FBE9E7;
  --tag-before-fg: #C0392B;
  --tag-after-bg:  #E7F4EC;
  --tag-after-fg:  #2F8A5B;

  /* ── Accent (same in both themes) ── */
  --accent:       #FF5A4D;

  /* ── Film grain ── */
  --grain-opacity: 0.025;

  /* ── Animation speed multiplier (1 = normal) ── */
  --dur: 1;

  /* ── Icon masks (Lucide; theme-independent, recoloured via background) ── */
  --ic-maximize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");

  /* ── Browser chrome ── */
  color-scheme: light;

  /* ── Layout ── */
  --maxw:      720px;   /* reading column — body text, footer */
  --maxw-wide: 1040px;  /* page shell — navbar + breakout image bands */
}

/* ── Dark palette — explicit toggle (always wins over system pref) ── */
[data-theme="dark"] {
  --bg:           #0F0F0D;
  --card:         #161613;

  --text:         #F0EDE8;
  --text-soft:    #CFCBC3;
  --muted:        #8A8780;

  --border:       #252420;
  --border-hover: #2E2B26;

  --shadow-sm:    0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-md:    0 12px 34px rgba(0, 0, 0, 0.30);
  --shadow-play:  0 4px 16px rgba(0, 0, 0, 0.55);

  --nav-gradient: linear-gradient(to bottom, rgba(15, 15, 13, 0.9), rgba(15, 15, 13, 0));

  --play-bg:      rgba(15, 15, 13, 0.92);
  --play-icon:    #F0EDE8;

  --tag-before-bg: rgba(192, 57, 43, 0.16);
  --tag-before-fg: #E8897E;
  --tag-after-bg:  rgba(47, 138, 91, 0.16);
  --tag-after-fg:  #7FC79E;

  --grain-opacity: 0.015;

  color-scheme: dark;
}

/* Light is the default for everyone. Dark applies only via an explicit
   [data-theme="dark"] toggle — the OS dark preference no longer auto-applies. */

/* ── Smooth transition on manual theme switch ── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.25s ease,
    box-shadow 0.35s ease !important;
}