/* TITECH v3 · tokens.css: owned by the work order listed in work-orders/DESIGN-SPEC.md §1. */
/* The design vocabulary (DESIGN-SPEC §2, §4, §7). Names are the contract other work orders rely on.
   WO-22a (2026-09-23) moved the palette onto the owner's brandbook: Deep Navy #26436C is the primary, and
   Sage Green #62966A, Rosewood #B94F62 and Plum Shadow #634868 are the secondaries. The brandbook derives its
   shades by multiplying a colour (+10% = x.9) and its tints by mixing it with white (80% = .8 colour + .2 white);
   every value below that is not a brandbook hex is one of those two steps, and says which.
   The owner keeps the blue --c-signal for buttons, links and focus, and the brandbook's Solar Flare orange is
   not used anywhere on the site. */

:root {
  /* ---- Brand colours, exactly as the brandbook prints them ---- */
  --c-brand-navy: #26436C; /* Primary   · Deep Navy    */
  --c-brand-sage: #62966A; /* Secondary · Sage Green   */
  --c-brand-rose: #B94F62; /* Secondary · Rosewood     */
  --c-brand-plum: #634868; /* Secondary · Plum Shadow  */

  /* ---- State colours (brandbook). Kept for form validation only. ---- */
  --c-state-info: #2F80ED;
  --c-state-success: #27AE60;
  --c-state-warning: #E2B93B;
  --c-state-error: #CE3C52;

  /* ---- Base palette. The "ink" family is now Deep Navy carried down the brandbook's shade ladder, so the
          darkest backgrounds and the body text on light are the brand hue rather than a neutral black. ---- */
  --c-ink-950: #09101A;    /* Deep Navy x.24 · body text on light, and the deepest ground */
  --c-ink-900: #111E31;    /* Deep Navy x.46 · footer ground and the light-context primary button */
  --c-ink-850: #172841;    /* Deep Navy +40% · its hover step */
  --c-ink-700: #2B4A76;    /* Deep Navy x1.13 · a solid line on the navy, when alpha will not do */
  --c-navy-600: #26436C;   /* the brand navy itself; the legacy --navy points here */
  --c-porcelain: #F4F6F8;  /* Deep Navy at 5% over white: the light ground, now cool instead of warm-green */
  --c-porcelain-2: #E9ECF0;/* Deep Navy at 10% over white */
  --c-white: #FFFFFF;

  /* ---- Signal: the only interactive accent. Owner (2026-09-23): the buttons, links and focus ring stay blue. ---- */
  --c-signal: #4C8DFF;
  --c-signal-hover: #6FA3FF;
  --c-signal-ink: #1F5FD1;   /* signal as TEXT on light backgrounds */
  --c-signal-soft: #A8C7FF;  /* signal as TEXT on the brand navy: 6.0:1 on #26436C, where #7FB0FF measured 4.6 */

  /* ---- Spectrum: the four brand colours, in the order the mark runs. On light ground they are the brandbook
          hexes; surfaces.css swaps in their lightened tints inside every dark context, because a gradient that
          passes through #26436C is invisible on a #26436C banner (owner's note, 2026-09-23). The channels are
          separate tokens so one override re-colours both gradients and every alpha built from them. ---- */
  --c-spec-1-rgb: 185 79 98;  /* Rosewood     */
  --c-spec-2-rgb: 99 72 104;  /* Plum Shadow  */
  --c-spec-3-rgb: 38 67 108;  /* Deep Navy    */
  --c-spec-4-rgb: 98 150 106; /* Sage Green   */
  --c-spec-1: rgb(var(--c-spec-1-rgb));
  --c-spec-2: rgb(var(--c-spec-2-rgb));
  --c-spec-3: rgb(var(--c-spec-3-rgb));
  --c-spec-4: rgb(var(--c-spec-4-rgb));
  --g-spectrum: linear-gradient(90deg, rgb(var(--c-spec-1-rgb)) 0%, rgb(var(--c-spec-2-rgb)) 34%, rgb(var(--c-spec-3-rgb)) 67%, rgb(var(--c-spec-4-rgb)) 100%);
  --g-spectrum-soft: linear-gradient(90deg, rgb(var(--c-spec-1-rgb) / .45), rgb(var(--c-spec-2-rgb) / .45), rgb(var(--c-spec-3-rgb) / .45), rgb(var(--c-spec-4-rgb) / .45));

  /* ---- The brandbook's three gradients, in its own order and direction. 1 is the main one (energy, trust,
          growth), 2 the secondary, 3 the supporting one the book recommends for backgrounds and subtle overlays. ---- */
  --g-brand-1: linear-gradient(90deg, var(--c-brand-rose) 0%, var(--c-brand-navy) 50%, var(--c-brand-sage) 100%);
  --g-brand-2: linear-gradient(90deg, var(--c-brand-navy) 0%, var(--c-brand-rose) 100%);
  --g-brand-3: linear-gradient(90deg, var(--c-brand-sage) 0%, var(--c-brand-navy) 100%);
  /* Gradient 3 as a card wash: sage lifts the leading corner and fades out before the middle, so a card still
     reads as one surface rather than a coloured panel (WO-22a step 3). Dark cards only. */
  --g-card-wash: linear-gradient(135deg, rgb(98 150 106 / .10) 0%, rgb(98 150 106 / .04) 34%, rgb(38 67 108 / 0) 68%);

  /* ---- Typefaces (brandbook): Inter for Latin, Tajawal for Arabic. IBM Plex Mono is kept for the small mono
          labels; the brandbook names no monospace face and those labels are a signature of this design. ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-arabic: "Tajawal", "Inter", Tahoma, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Context variables, light values. surfaces.css sets the dark values on the dark sections. */
  --ctx-bg: var(--c-porcelain);
  --ctx-surface: var(--c-white);
  --ctx-surface-hover: #FAFBFC;
  --ctx-heading: #0B1424;
  --ctx-body: #2F3B4C;
  --ctx-muted: #5B6778;
  --ctx-line: #DCE1E7;
  --ctx-line-strong: #C2CAD3;
  --ctx-link: var(--c-signal-ink);
  --ctx-tint: var(--c-porcelain-2);
  --ctx-focus: var(--c-signal-ink);  /* focus ring, >=3:1 on white and porcelain */
  --ctx-field-border: #7C8896;       /* form field border, >=3:1 on white and porcelain */

  /* Space, radius, depth */
  --space-section: clamp(72px, 9vw, 160px);
  --space-block: clamp(40px, 5vw, 72px);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-button: 6px; /* every button (owner, 2026-09-22): a rounded rectangle with slightly rounded corners, not a pill */
  --shadow-card: 0 1px 0 rgb(11 20 36 / .04), 0 16px 40px -24px rgb(11 20 36 / .28);
  --glow-signal: 0 0 0 1px rgb(76 141 255 / .30), 0 8px 28px -12px rgb(76 141 255 / .50); /* primary buttons: mild */
  --glow-soft: 0 0 0 1px rgb(76 141 255 / .16), 0 12px 32px -16px rgb(76 141 255 / .42);  /* cards and outline buttons: very mild */

  /* Hover fades (owner request): colour and glow changes ease in rather than switching.
     --dur-hover is the one setting for hover speed across the site. */
  --dur-hover: 320ms;
  --ease-hover: cubic-bezier(.4, 0, .2, 1);

  /* ---- Banners (home hero + page heroes) and dark sections: the brand navy with a soft aurora (owner choice,
          option C, 2026-09-22). WO-22a moved the navy itself to the brandbook's #26436C and took the depth from
          the brandbook's shade ladder (+10% #223C61, +30% #1B2F4C). The aurora is now Deep Navy and Plum Shadow
          themselves, lifted in brightness (x1.6) rather than mixed with white: a white mix greys the navy into haze,
          while the brightened hue lights it. Both hotspots sit above the top edge, so what falls behind the text is
          the tail of the light, not its centre; the contrast table in the WO-22a report measures what is left. ---- */
  --c-banner: #26436C;
  --bg-banner:
    radial-gradient(900px circle at 82% -5%, rgb(61 107 173 / .30), transparent 60%),
    radial-gradient(700px circle at 8% 0%, rgb(158 115 166 / .18), transparent 60%),
    linear-gradient(180deg, #2B4A76 0%, #26436C 55%, #1B2F4C 100%);
  /* The same banner for dark sections and cards of any height (owner, 2026-09-22). Every stop is measured from the top, so a
     tall section keeps its light at the top instead of stretching it. The hotspots sit above the top edge and the navy starts
     at the brand value, so the light falls on the section's top padding and not behind its text: --ctx-muted,
     the faintest dark-context text, stays >= 4.5:1 against the lightest pixel behind it, grid lines included. Phones get
     smaller hotspots (end of file), because a 900px one would cover the whole column there.
     WO-19 integration: the last stop is at least 800px down, so a section only a little taller than 480px (the Featured
     Expertise proof strip, 497px) ends partway into the fade instead of squeezing it into a dark band along its bottom. */
  --bg-banner-section:
    radial-gradient(900px circle at 82% -300px, rgb(61 107 173 / .30), transparent 60%),
    radial-gradient(700px circle at 8% -280px, rgb(158 115 166 / .18), transparent 60%),
    linear-gradient(180deg, #26436C 0, #223C61 480px, #1B2F4C max(100%, 800px));
  /* Page heroes: the banner itself, with its plum hotspot lifted off the eyebrow, which it lit to 3.1:1 on main. The
     navy one stays behind the hero visual. At 1000px and below the hero stacks and its eyebrow runs under both hotspots,
     so it takes the section geometry there (end of file). */
  --bg-banner-page:
    radial-gradient(900px circle at 82% -5%, rgb(61 107 173 / .30), transparent 60%),
    radial-gradient(700px circle at 8% -200px, rgb(158 115 166 / .18), transparent 60%),
    linear-gradient(180deg, #2B4A76 0%, #26436C 55%, #1B2F4C 100%);
  /* The footer: the calm form of the same navy, no hotspots, one shade below the CTA band so the two separate. */
  --bg-footer: linear-gradient(180deg, #1B2F4C 0%, #172841 100%);
  --grid-line: rgb(255 255 255 / .04);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-reveal: 700ms;
  --dur-image: 1200ms;
  --stagger: 70ms;
  --rise: 24px;

  /* Legacy remap: site.css and details.css inherit the new look without edits. */
  --paper: var(--c-porcelain);
  --ink: var(--c-ink-950);
  --navy: var(--c-navy-600);
  --muted: #5B6778;
  --line: #DCE1E7;
  --green: var(--c-porcelain-2);
  --plum: var(--c-porcelain-2);
  --rose: var(--c-porcelain-2);
  --orange: var(--c-porcelain-2);
  --accent: var(--c-signal-soft);
  --section-space: var(--space-section);
}

/* RTL: the aurora mirrors with the layout. */
[dir="rtl"] {
  --bg-banner:
    radial-gradient(900px circle at 18% -5%, rgb(61 107 173 / .30), transparent 60%),
    radial-gradient(700px circle at 92% 0%, rgb(158 115 166 / .18), transparent 60%),
    linear-gradient(180deg, #2B4A76 0%, #26436C 55%, #1B2F4C 100%);
  --bg-banner-section:
    radial-gradient(900px circle at 18% -300px, rgb(61 107 173 / .30), transparent 60%),
    radial-gradient(700px circle at 92% -280px, rgb(158 115 166 / .18), transparent 60%),
    linear-gradient(180deg, #26436C 0, #223C61 480px, #1B2F4C max(100%, 800px));
  --bg-banner-page:
    radial-gradient(900px circle at 18% -5%, rgb(61 107 173 / .30), transparent 60%),
    radial-gradient(700px circle at 92% -200px, rgb(158 115 166 / .18), transparent 60%),
    linear-gradient(180deg, #2B4A76 0%, #26436C 55%, #1B2F4C 100%);
}

/* The rules below come last, so they win over the RTL block above at the same specificity.
   Stacked page heroes (1000px and below) take the section geometry; var() resolves on the same element, so it follows the
   direction and the phone values below. */
@media (max-width: 1000px) {
  :root, [dir="rtl"] { --bg-banner-page: var(--bg-banner-section); }
}
/* Phones: a 390px column sits wholly inside a 900px hotspot, kicker included, so the light is scaled to the screen and held in
   the top padding (--space-section is 72px there, and the kicker starts below it). The hero is the tight case: its eyebrow
   sits close under the header, inside the tail of both hotspots, so on a phone the aurora runs weaker than on desktop.
   It is weaker again than the ink-era values, because it now lights a navy that is already four steps brighter. */
@media (max-width: 600px) {
  :root {
    --bg-banner:
      radial-gradient(560px circle at 84% -40px, rgb(61 107 173 / .20), transparent 60%),
      radial-gradient(440px circle at 8% -40px, rgb(158 115 166 / .13), transparent 60%),
      linear-gradient(180deg, #2B4A76 0%, #26436C 55%, #1B2F4C 100%);
    --bg-banner-section:
      radial-gradient(560px circle at 84% -250px, rgb(61 107 173 / .22), transparent 60%),
      radial-gradient(440px circle at 8% -200px, rgb(158 115 166 / .14), transparent 60%),
      linear-gradient(180deg, #26436C 0, #223C61 480px, #1B2F4C max(100%, 800px));
  }
  [dir="rtl"] {
    --bg-banner:
      radial-gradient(560px circle at 16% -40px, rgb(61 107 173 / .20), transparent 60%),
      radial-gradient(440px circle at 92% -40px, rgb(158 115 166 / .13), transparent 60%),
      linear-gradient(180deg, #2B4A76 0%, #26436C 55%, #1B2F4C 100%);
    --bg-banner-section:
      radial-gradient(560px circle at 16% -250px, rgb(61 107 173 / .22), transparent 60%),
      radial-gradient(440px circle at 92% -200px, rgb(158 115 166 / .14), transparent 60%),
      linear-gradient(180deg, #26436C 0, #223C61 480px, #1B2F4C max(100%, 800px));
  }
}