/* ============================================================
   Phibon Design System — tokens, v4 "Dispatch"

   A deliberate break from v3. v3 was a white page with a navy band
   in it. v4 inverts that: the firm's own navy is the primary ground
   and the default state of the brand, and white is where the long
   reading happens. That is the structure McKinsey, frog and the
   other references share, and it is the single change that gives a
   boutique firm the presence of a large one.

   Typography changes with it. Archivo and Public Sans are both
   grotesques; a page set entirely in them has no voice, only
   weights. v4 uses the Phibon Design System pairing (since 23
   September 2026; it launched with Newsreader + IBM Plex Sans):

     Albert Sans    display, headlines, pull quotes, figures
                    A Scandinavian geometric sans with an italic that
                    carries the one accent word in the hero.
     Source Sans 3  everything operational: body, labels, UI, tables
                    Open, legible at small sizes, and the same face
                    the firm's documents and decks use.

   What carries over from v3, because it was right: φ as the
   measurement system, the brand ramps, hairlines instead of cards,
   a stated deliverable on every block.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- 1. Brand ramps (unchanged, audited) ---------- */
  --phi-navy-50:#F1F7FF;  --phi-navy-100:#D2DEED; --phi-navy-200:#B1C5DF;
  --phi-navy-300:#8FACD2; --phi-navy-400:#6F93C3; --phi-navy-500:#547BAF;
  --phi-navy-600:#3C6397; --phi-navy-700:#274D7E; --phi-navy-800:#143763;
  --phi-navy-900:#09274D; --phi-navy-950:#021937;

  --phi-teal-50:#F0F9F9;  --phi-teal-200:#B7D2D4; --phi-teal-400:#7AAEB1;
  --phi-teal-600:#4A888C; --phi-teal-700:#387478; --phi-teal-800:#1D565A;
  --phi-teal-900:#033A3D;

  --phi-green-200:#B7D6CE; --phi-green-400:#79B5A8; --phi-green-600:#499082;
  --phi-green-800:#0F564B;

  --phi-mint-50:#EFFAF5;  --phi-mint-100:#D4E8DF; --phi-mint-200:#B4D8C9;
  --phi-mint-300:#93C8B2; --phi-mint-400:#72B89D; --phi-mint-500:#56A689;
  --phi-mint-600:#358B6E; --phi-mint-700:#156F55; --phi-mint-800:#00553D;

  --phi-neutral-0:#FFFFFF;   --phi-neutral-50:#F8FAFC;  --phi-neutral-100:#F1F5F9;
  --phi-neutral-200:#E2E8F0; --phi-neutral-300:#CBD5E1; --phi-neutral-400:#94A3B8;
  --phi-neutral-500:#64748B; --phi-neutral-550:#5E6D84; --phi-neutral-600:#475569;
  --phi-neutral-700:#334155; --phi-neutral-800:#1E293B; --phi-neutral-900:#0E1F4B;

  --phi-danger-800:#8E0002; --phi-danger-50:#FFF1ED;
  --phi-success-800:#0C5D3F; --phi-success-50:#EFFAF4;
  --phi-warning-800:#7C3E00;

  /* ---------- 2. Grounds ----------
     Abyss is where the brand lives: navy pushed almost to black so
     that photography, the mint accent and white type all sit on it
     without competing. Slate is one step up, for a band inside a
     dark stretch. Paper is where anything longer than a paragraph
     goes. Chalk is a cool, un-tinted grey — never cream.          */
  --phi-abyss:#020F1E;
  --phi-slate:#06192D;
  --phi-slate-2:#0B2439;
  --phi-paper:#FFFFFF;
  --phi-chalk:#F2F4F5;
  --phi-ink:#021937;

  /* ---------- 3. Brand marks ---------- */
  --phi-brand-gradient: linear-gradient(90deg,
      var(--phi-navy-800) 0%, var(--phi-teal-700) 38%,
      var(--phi-green-600) 68%, var(--phi-mint-500) 100%);
  --phi-brand-gradient-dark: linear-gradient(90deg,
      var(--phi-navy-400) 0%, var(--phi-teal-400) 42%, var(--phi-mint-400) 100%);

  /* ---------- 4. On paper ---------- */
  --phi-surface-page: var(--phi-paper);
  --phi-surface-sunken: var(--phi-chalk);
  --phi-text-primary: var(--phi-neutral-800);
  --phi-text-secondary: var(--phi-neutral-600);
  --phi-text-tertiary: var(--phi-neutral-550);
  --phi-text-heading: var(--phi-ink);
  --phi-text-link: var(--phi-navy-700);
  --phi-rule: rgba(2,25,55,.12);
  --phi-rule-strong: rgba(2,25,55,.24);
  --phi-accent-ink: var(--phi-mint-700);

  /* ---------- 5. On the dark ground ----------
     Against #020F1E: white 18.6:1, .72 white 12.2:1, .56 white 7.3:1,
     mint-300 9.9:1, mint-400 7.7:1. Every one clears AA at any size. */
  --phi-on-dark: #FFFFFF;
  --phi-on-dark-2: rgba(255,255,255,.74);
  --phi-on-dark-3: rgba(255,255,255,.56);
  --phi-on-dark-accent: var(--phi-mint-300);
  --phi-rule-dark: rgba(255,255,255,.14);
  --phi-rule-dark-strong: rgba(255,255,255,.30);
  --phi-quiet-hover: rgba(255,255,255,.06);
  --phi-invert-hover: var(--phi-mint-200);
  --phi-scrim-v: linear-gradient(180deg, rgba(2,15,30,.82) 0%, rgba(2,15,30,.58) 40%, rgba(2,15,30,.94) 100%);
  --phi-scrim-h: linear-gradient(90deg, rgba(2,15,30,.92) 0%, rgba(2,15,30,.30) 72%);

  /* Text on a photograph. These never flip with the reading mode: a card
     carries its own dark overlay, so its type stays white in both.   */
  --phi-image-fg: #FFFFFF;
  --phi-image-fg-2: rgba(255,255,255,.82);
  --phi-image-accent: var(--phi-mint-300);
  --phi-image-overlay: linear-gradient(180deg, rgba(2,15,30,.30) 0%, rgba(2,15,30,.58) 38%, rgba(2,15,30,.94) 100%);
  --phi-image-overlay-strong: linear-gradient(180deg, rgba(2,15,30,.46) 0%, rgba(2,15,30,.72) 38%, rgba(2,15,30,.97) 100%);

  /* ---------- 6. Actions ---------- */
  --phi-action-bg: var(--phi-ink);
  --phi-action-fg: #FFFFFF;
  --phi-focus: 0 0 0 2px var(--phi-paper), 0 0 0 4px var(--phi-mint-600);
  --phi-focus-dark: 0 0 0 2px var(--phi-abyss), 0 0 0 4px var(--phi-mint-300);

  /* ============================================================
     7. Type
     Scale steps by √φ (1.27202); every second step is exactly φ.
     Display sizes are fluid, with rem floors and ceilings so they
     still respond to browser zoom.
     ============================================================ */
  --phi-font-display: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --phi-font-text: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* A sans headline needs more weight than the serif it replaced did at 400. */
  --phi-weight-display: 500;

  --phi-size--1: 0.786rem;
  --phi-size-0:  1rem;
  --phi-size-1:  1.272rem;
  --phi-size-2:  1.618rem;
  --phi-size-3:  2.058rem;
  --phi-size-4:  2.618rem;
  --phi-size-5:  3.330rem;
  --phi-size-6:  4.236rem;
  --phi-size-7:  5.388rem;

  /* One φ step smaller than launch (23 Sep 2026): at the old sizes the
     sans headlines read as shouting and the subtitles were hard to take in. */
  --phi-display-1: clamp(2.06rem, 1.4rem + 3vw, var(--phi-size-6));
  --phi-display-2: clamp(1.62rem, 1.25rem + 1.9vw, var(--phi-size-4));
  --phi-display-3: clamp(1.27rem, 1.1rem + 0.9vw, var(--phi-size-3));
  --phi-display-4: clamp(1.1rem, 1rem + 0.5vw, var(--phi-size-1));

  --phi-leading-display: 1.02;
  --phi-leading-heading: 1.14;
  --phi-leading-body: 1.62;
  --phi-measure: 64ch;
  --phi-measure-tight: 44ch;
  --phi-tracking-display: -0.021em;
  --phi-tracking-label: 0.13em;

  /* ---------- 8. Space — φ from a 6px seed ---------- */
  --phi-s1: 0.375rem;  --phi-s2: 0.606rem;  --phi-s3: 0.982rem;
  --phi-s4: 1.588rem;  --phi-s5: 2.570rem;  --phi-s6: 4.157rem;
  --phi-s7: 6.727rem;  --phi-s8: 10.884rem;
  --phi-section: clamp(var(--phi-s5), 2.6rem + 4.4vw, var(--phi-s7));
  --phi-section-tight: clamp(var(--phi-s4), 1.8rem + 2.6vw, var(--phi-s6));

  /* ---------- 9. Layout ---------- */
  --phi-container: 85rem;      /* 1360 */
  --phi-gutter: clamp(var(--phi-s4), 1.4vw + 0.9rem, var(--phi-s6));
  --phi-major-fr: minmax(0, 61.8fr);
  --phi-minor-fr: minmax(0, 38.2fr);
  --phi-header: 4.75rem;

  --phi-radius: 0px;           /* v4 has no rounded corners at all */
  --phi-radius-pill: 999px;
  --phi-shadow-menu: 0 30px 60px -30px rgba(2,15,30,.55);

  /* ---------- 10. Motion ---------- */
  --phi-ease: cubic-bezier(.2,0,.1,1);
  --phi-ease-out: cubic-bezier(.16,1,.3,1);
  --phi-dur-1: 150ms; --phi-dur-2: 280ms; --phi-dur-3: 680ms;
  --phi-hover-intent: 320ms;
  --phi-z-header: 100; --phi-z-menu: 110; --phi-z-overlay: 120;
}

/* ---------- Reading mode ----------
   Dark is the brand's default and stays the default. Light is offered as
   a reading mode, chosen by the visitor and remembered on their device.
   Every value below was measured: on-dark-2 #3A4A5E is 9.5:1 on white,
   on-dark-3 #5E6D84 is 5.25:1 on white and 4.94:1 on chalk, and the
   accent mint-700 is 5.9:1.                                            */
:root[data-phibon-theme="light"] {
  color-scheme: light;
  --phi-abyss: #FFFFFF;
  --phi-slate: var(--phi-chalk);
  --phi-slate-2: #E8ECEF;
  --phi-on-dark: var(--phi-ink);
  --phi-on-dark-2: #3A4A5E;
  --phi-on-dark-3: #5E6D84;
  --phi-on-dark-accent: var(--phi-mint-700);
  --phi-rule-dark: rgba(2,25,55,.12);
  --phi-rule-dark-strong: rgba(2,25,55,.26);
  --phi-quiet-hover: rgba(2,25,55,.05);
  --phi-invert-hover: var(--phi-navy-800);
  --phi-focus-dark: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--phi-mint-600);
  --phi-scrim-v: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,.96) 100%);
  --phi-scrim-h: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 45%, rgba(255,255,255,.20) 78%);
  --phi-shadow-menu: 0 30px 60px -30px rgba(2,25,55,.30);
}

@media (prefers-reduced-motion: reduce) {
  :root { --phi-dur-1: 0ms; --phi-dur-2: 0ms; --phi-dur-3: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}