/* ==========================================================================
   tokens.css — design constants
   The single source of truth for colour, type, spacing and motion.
   Every other stylesheet reads from these variables. Change a value once
   here and it propagates across the whole site.
   ========================================================================== */

/* ---- Breakpoints (the screen widths where the layout changes) -------------
   Two breakpoints, chosen to suit most devices:
     phone  = 600px  ->  at/below this width, multi-column layouts become 1 column
     tablet = 900px  ->  at/below this width, multi-column layouts drop columns
   CSS @media rules cannot read a variable (and there is no build step to inject
   one), so these two numbers are written literally in each @media rule over in
   layout.css and components.css — every one is labelled "phone" or "tablet".
   This block is the one place that defines them: to change a breakpoint, edit the
   number here AND in the matching labelled @media rules.
   (They are not config.js constants: config.js is for JavaScript, and these
   numbers are only ever used by CSS.)
   -------------------------------------------------------------------------- */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --color-bg:          #edf5fb;  /* page background — light sky tint         */
  --color-surface:     #ffffff;  /* raised surfaces: cards, header          */
  --color-surface-alt: #dfeef8;  /* subtle alternate band                   */
  --color-ink:         #16202a;  /* primary text — cool near-black          */
  --color-ink-soft:    #47586a;  /* secondary text                          */
  --color-ink-faint:   #7f93a6;  /* muted labels, captions                  */
  --color-line:        #d3e2ee;  /* hairline borders                        */
  --color-line-strong: #bcd0e0;  /* stronger borders, inputs                */

  --color-accent:      #3f9fdb;  /* light sky blue — brand accent           */
  --color-accent-deep: #17689a;  /* hover / active / links                  */
  --color-accent-soft: #dceffb;  /* tinted accent background                */

  --color-white:       #ffffff;  /* pure white for text/fills on dark areas */

  /* Feedback colours — contact-form validation + status messages */
  --color-error:        #b23b2e;  /* invalid-field text + error status       */
  --color-error-border: #c4503f;  /* invalid-field input border              */
  --color-success:      #4a7c59;  /* "message sent" status                   */

  /* Text on the dark footer / call-to-action panels. These are warm greys —
     warmer than the cool-blue palette above (a leftover from an earlier look
     that you may want to re-tone to match one day). */
  --color-on-dark:       #d9d6cd;             /* body text on a dark panel    */
  --color-on-dark-faint: #a5a299;             /* footer fine print            */
  --color-cta-text:      #cbc8bf;             /* call-to-action paragraph      */
  --color-rule-on-dark:  rgba(255, 255, 255, 0.12);  /* divider on dark panel */

  /* Division accent hues — a small colour marker along the top of each card */
  --hue-real-estate-investment: #b1603a;  /* Real Estate & Investment card    */
  --hue-software:               #3f6079;  /* Software Engineering card        */
  --hue-research:               #7d5386;  /* Scientific Research card         */

  /* ---- Typography ------------------------------------------------------ */
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* Fluid type scale (grows with the viewport where useful) */
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   clamp(1.25rem, 1.10rem + 0.65vw, 1.55rem);
  --text-xl:   clamp(1.55rem, 1.25rem + 1.45vw, 2.25rem);
  --text-2xl:  clamp(2.05rem, 1.55rem + 2.45vw, 3.25rem);
  --text-3xl:  clamp(2.55rem, 1.85rem + 3.45vw, 4.50rem);

  --leading-tight: 1.12;   /* line-height for big headings                    */
  --leading-body:  1.65;   /* line-height for body text                       */

  --tracking-tight: -0.02em;  /* letter-spacing: pull headings together        */
  --tracking-wide:  0.16em;   /* letter-spacing: open up small-caps labels     */

  /* ---- Spacing scale --------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Layout ---------------------------------------------------------- */
  --container:      72rem;   /* 1152px — default content width               */
  --container-text: 42rem;   /* narrower width for comfortable reading        */
  --gutter: clamp(1.25rem, 5vw, 3rem);   /* left/right page padding           */
  --header-h: 4.5rem;

  /* ---- Radii (corner rounding) ----------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- Elevation (drop shadows) ---------------------------------------- */
  --shadow-md: 0 6px 20px rgba(26, 26, 24, 0.06), 0 2px 6px rgba(26, 26, 24, 0.05);
  --shadow-lg: 0 22px 55px rgba(26, 26, 24, 0.11), 0 6px 16px rgba(26, 26, 24, 0.06);

  /* ---- Motion ---------------------------------------------------------- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-slow: 560ms;

  /* ---- Layering (stack order) ------------------------------------------ */
  --z-header: 100;   /* keeps the sticky header above the page               */
}