/* ==========================================================================
   Eclipse Build — design tokens
   Every literal colour, type size, and spacing value in the site resolves to
   one of the custom properties below. Change a value here, change it
   everywhere. The site stylesheet (site.css) references these and nothing
   hard-coded.
   ========================================================================== */

:root{

  /* ---- colour primitives --------------------------------------------- */
  --ink:#0E1113;          /* base dark ground */
  --slate:#171C20;
  --slate-2:#232A2F;
  --bone:#E9E5DB;         /* base light ground */
  --bone-2:#DDD8CB;
  --corona:#E3B04B;       /* accent gold — used sparingly */
  --corona-bright:#F0C05E;/* gold, button hover */
  --on-gold:#171200;      /* text/ink sitting on the gold accent */

  --fog:#B9BFC3;          /* hero sub-copy on ink */
  --dim:#8C949A;          /* muted text, dark ground */
  --dim-dark:#5E6B63;     /* muted text, light ground */

  --slate-text:#3B4247;   /* body copy on bone */
  --proj-text:#565D62;
  --co-text:#4A5155;
  --steel:#6B7378;        /* mono meta on bone */
  --mute-light:#9AA0A4;   /* todo / disabled text on bone */
  --white:#FFF;

  --dot:#CFCABC;          /* portal window dots */
  --tick-line:#C6C1B4;    /* milestone tick outline */
  --proj-img-a:#CBC5B6;   /* project placeholder gradient */
  --proj-img-b:#B4AE9E;
  --proj-img-text:#6F6A5C;

  /* ---- alpha rules & grounds ----------------------------------------- */
  --rule-dark:rgba(233,229,219,.14);
  --rule-light:rgba(14,17,19,.14);
  --nav-bg:rgba(14,17,19,.86);
  --mile-rule:rgba(14,17,19,.08);
  --shadow-screen:0 22px 48px -30px rgba(14,17,19,.5);

  /* ---- semantic theme tokens ----------------------------------------
     Reassigned by data-theme below. Any section flips ground, foreground,
     rule, and muted text by changing a single attribute. Default = dark.
     The hero wall drawing (--wall-*) is themed here too so the same drawing
     reads on ink or on bone: bone-at-low-alpha lines invert to ink-at-low-
     alpha, and the "quiet inside" readout follows the foreground. */
  --bg:var(--ink);
  --fg:var(--bone);
  --rule:var(--rule-dark);
  --muted:var(--dim);
  --wall-hatch:rgba(233,229,219,.20);
  --wall-zone:rgba(233,229,219,.09);
  --wall-leaf:rgba(233,229,219,.5);
  --wall-axis:rgba(233,229,219,.28);
  --wall-fg:var(--bone);
  --wall-label:var(--dim);

  /* ---- type scale (fixed sizes named by px value) -------------------- */
  --fs-10:10px;
  --fs-11:11px;
  --fs-12:12px;
  --fs-12-5:12.5px;
  --fs-13:13px;
  --fs-13-5:13.5px;
  --fs-14:14px;
  --fs-14-5:14.5px;
  --fs-15:15px;
  --fs-15-5:15.5px;
  --fs-16:16px;
  --fs-16-5:16.5px;
  --fs-17:17px;
  --fs-17-5:17.5px;
  --fs-19:19px;
  --fs-20:20px;
  --fs-22:22px;
  --fs-23:23px;
  --fs-26:26px;

  /* ---- type scale (fluid display sizes, named by role) --------------- */
  --fs-hero:clamp(40px,6vw,74px);
  --fs-thesis:clamp(22px,2.4vw,30px);
  --fs-portal-h2:clamp(32px,4vw,48px);
  --fs-work-h2:clamp(30px,3.6vw,44px);
  --fs-companies-h2:clamp(28px,3.4vw,42px);
  --fs-cta-h2:clamp(30px,4vw,50px);

  /* ---- spacing scale (named by px value) ----------------------------- */
  --space-2:2px;
  --space-3:3px;
  --space-5:5px;
  --space-7:7px;
  --space-8:8px;
  --space-9:9px;
  --space-10:10px;
  --space-11:11px;
  --space-12:12px;
  --space-13:13px;
  --space-14:14px;
  --space-15:15px;
  --space-16:16px;
  --space-18:18px;
  --space-20:20px;
  --space-22:22px;
  --space-24:24px;
  --space-26:26px;
  --space-28:28px;
  --space-30:30px;
  --space-32:32px;
  --space-34:34px;
  --space-36:36px;
  --space-38:38px;
  --space-40:40px;
  --space-44:44px;
  --space-48:48px;
  --space-56:56px;
  --space-64:64px;
  --space-70:70px;
  --space-96:96px;
  --space-100:100px;
  --space-110:110px;
  --space-120:120px;
  --space-180:180px;

  /* ---- radii & layout ------------------------------------------------ */
  --radius-2:2px;
  --radius-3:3px;
  --radius-round:50%;
  --maxw:1180px;
}

/* Explicit theme attributes so any element can flip by one attribute.
   data-theme="dark" restates the defaults; data-theme="light" inverts. */
[data-theme="dark"]{
  --bg:var(--ink);
  --fg:var(--bone);
  --rule:var(--rule-dark);
  --muted:var(--dim);
  --wall-hatch:rgba(233,229,219,.20);
  --wall-zone:rgba(233,229,219,.09);
  --wall-leaf:rgba(233,229,219,.5);
  --wall-axis:rgba(233,229,219,.28);
  --wall-fg:var(--bone);
  --wall-label:var(--dim);
}
[data-theme="light"]{
  --bg:var(--bone);
  --fg:var(--ink);
  --rule:var(--rule-light);
  --muted:var(--dim-dark);
  --wall-hatch:rgba(14,17,19,.20);
  --wall-zone:rgba(14,17,19,.09);
  --wall-leaf:rgba(14,17,19,.5);
  --wall-axis:rgba(14,17,19,.28);
  --wall-fg:var(--ink);
  --wall-label:var(--dim-dark);
}