/* ============================================================
   MELINJO DESIGN SYSTEM — Foundations
   Typeface: Karbon (Process Type Foundry)
   System ethos: warm editorial restraint on the IBM 2x Grid.
   Warm paper + ink, an ELECTRIC COBALT primary (wordmark, actions,
   "blue grounds") and an ORANGE accent (the wordmark dot + sparing
   sparks). A generative FLOW-FIELD graphic (blue→cyan→green dashes on
   a warm-dark ground) is the brand's signature image. Thin, light
   iconography. Photography used sparingly. Grid & structure inspired
   by the IBM Design Language. No IBM marks used.

   Source of truth: design_system/colors_and_type.css from the design
   handoff. IBM Plex Mono is referenced by the --font-mono token but not
   shipped — nothing on the site renders in mono today; add the font
   files if that changes.
   ============================================================ */

/* ----------  KARBON FONT FACES (WOFF2, converted from the handoff OTFs)
     Licensed font (Process Type Foundry) — confirm web-font licensing
     before deploying.  ---------- */
@font-face { font-family:"Karbon"; src:url("../fonts/Karbon-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Karbon"; src:url("../fonts/Karbon-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Karbon"; src:url("../fonts/Karbon-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Karbon"; src:url("../fonts/Karbon-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Karbon"; src:url("../fonts/Karbon-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ----------  NEUTRAL INK SCALE (warm)  ---------- */
  --ink-900: #19181d; /* primary text, ink panels             */
  --ink-800: #2a2830;
  --ink-700: #3f3d47; /* strong secondary text                */
  --ink-600: #5a5862;
  --ink-500: #75737e; /* muted text, captions                 */
  --ink-400: #a3a1ab; /* placeholder, disabled text           */
  --ink-300: #cfccd4; /* disabled borders                     */
  --ink-200: #e6e2dc; /* warm hairline rules                  */
  --ink-100: #efebe4; /* warm subtle fills, hover             */

  /* ----------  PAPER / SURFACES  ---------- */
  --paper:      #f4f1ea; /* warm page background              */
  --paper-deep: #ebe7dd; /* recessed background               */
  --surface:    #ffffff; /* cards, raised surfaces            */
  --surface-2:  #fbfaf6; /* alt card / striped rows           */
  --white:      #ffffff; /* (token referenced by logo.html)   */

  /* ----------  COBALT — PRIMARY BRAND  ----------
     The brand colour: wordmark, primary actions, links, and full
     "blue grounds" (white text on cobalt). 10-step ramp.          */
  --blue-100: #e9efff;
  --blue-200: #cbdbff;
  --blue-300: #9fbcff;
  --blue-400: #6090ff;
  --blue-500: #2f66f4;
  --blue-600: #1450e0; /* PRIMARY                            */
  --blue-700: #0e3fbe; /* hover / wordmark / links           */
  --blue-800: #0a2f8f;
  --blue-900: #07205c;

  /* ----------  ORANGE — ACCENT  ----------
     The wordmark dot + sparing highlights / sparks. Used rarely.   */
  --orange:        #ea3b1a;
  --orange-hover:  #cf3010;
  --orange-press:  #b22a0d;
  --orange-tint:   #fbe2da;

  /* ----------  FLOW-FIELD GRAPHIC PALETTE  ----------
     The generative brand image: directional dashes coloured along
     blue→cyan→green on a warm-dark ground. Tokens drive <flow-field>. */
  --flow-bg:  #2a2723; /* warm-dark ground                    */
  --flow-1:   #0e3fbe; /* deep blue                           */
  --flow-2:   #2f7df0; /* blue                                */
  --flow-3:   #13b8d4; /* cyan                                */
  --flow-4:   #35d07a; /* green                               */

  /* ----------  MESH GRADIENT  ----------
     The still mesh-gradient brand graphic (see shader-surface.js →
     <shader-surface>): a smooth diagonal sweep locked to the brand
     palette — deep navy (blue-900) through cobalt into dark cyan and a
     deep flow green — one fixed frame, no motion.
     A quiet digital companion to the
     flow-field; never a default page background. This is the ONE sanctioned
     decorative-gradient exception; flat grounds + the flow-field remain the
     defaults elsewhere.                                                  */
  --mesh-brand: #07205C, #0A2F8F, #0E3FBE, #0A5F73, #176B41;

  /* ----------  EDITORIAL PANEL TINTS  ---------- */
  --tint-sand: #ebe4d6; /* warm section panel                 */
  --tint-blue: #e4ecfb; /* pale cobalt panel                  */
  --tint-clay: #e7d8cd; /* tertiary warm panel                */

  /* ----------  SEMANTIC / STATUS  ---------- */
  --success: #2c7a4d;
  --warning: #9a6a12;
  --danger:  #b3331c;
  --info:    #1450e0;
  --focus:   var(--blue-600);

  /* ----------  ROLE ALIASES  ---------- */
  --brand:        var(--blue-600);
  --brand-hover:  var(--blue-700);
  --brand-press:  var(--blue-800);
  --brand-ground: var(--blue-600); /* white text on this      */
  --on-brand:     #ffffff;
  --accent:        var(--orange);  /* the spark / dot          */
  --accent-hover:  var(--orange-hover);
  --accent-press:  var(--orange-press);
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-disabled: var(--ink-400);
  --bg-1: var(--paper);
  --bg-2: var(--surface);
  --bg-3: var(--paper-deep);
  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--ink-900);
  --link: var(--blue-700);

  /* ----------  TYPE — FAMILIES  ---------- */
  --font-sans: "Karbon", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ----------  TYPE — WEIGHTS  ---------- */
  --w-hairline:100;
  --w-thin:200;
  --w-light:300;
  --w-regular:400;
  --w-medium:500;
  --w-semibold:600;
  --w-bold:700;

  /* ----------  TYPE — FLUID SIZE SCALE  ---------- */
  --fs-display-2xl: clamp(72px, 9vw, 132px);
  --fs-display-xl:  clamp(56px, 6.5vw, 92px);
  --fs-display-l:   clamp(44px, 5vw, 68px);
  --fs-h1:   clamp(36px, 3.6vw, 52px);
  --fs-h2:   clamp(29px, 2.8vw, 38px);
  --fs-h3:   clamp(23px, 2vw, 28px);
  --fs-h4:   20px;
  --fs-body-l: 19px;
  --fs-body:   17px;
  --fs-body-s: 15px;
  --fs-label:  13px;
  --fs-caption: 13px;
  --fs-overline: 12px;

  /* ----------  TYPE — LINE HEIGHTS / TRACKING  ---------- */
  --lh-tight: 0.98;
  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --lh-relaxed: 1.7;
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.06em;
  --tracking-overline: 0.14em;

  /* ----------  IBM 2x GRID  (aligned to @carbon/layout)  ----------
     16-column live area, 8px mini unit, 32px gutters.              */
  --grid-columns: 16;
  --grid-gutter: 32px;
  --grid-margin: clamp(16px, 4vw, 64px);
  --mini-unit: 8px;
  /* Carbon breakpoints (width / columns) */
  --bp-sm: 320px;
  --bp-md: 672px;
  --bp-lg: 1056px;
  --bp-xlg: 1312px;
  --bp-max: 1584px;
  /* Control / element sizes (heights) */
  --size-xs: 24px;
  --size-sm: 32px;
  --size-md: 40px;
  --size-lg: 48px;
  --size-xl: 64px;
  --size-2xl: 80px;
  /* Icon sizes */
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;

  /* ----------  SPACING (8px mini-unit family + 4px halves)  ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* ----------  RADII (minimal / editorial)  ---------- */
  --radius-0: 0px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px;

  /* ----------  ICONOGRAPHY  ---------- */
  --icon-stroke: 1.5;

  /* ----------  BORDERS  ---------- */
  --hairline: 1px solid var(--border-1);
  --rule: 1px solid var(--border-strong);
  --rule-2: 2px solid var(--border-strong);

  /* ----------  SHADOWS (subtle; prefer hairlines)  ---------- */
  --shadow-1: 0 1px 2px rgba(25,24,29,0.06);
  --shadow-2: 0 2px 8px rgba(25,24,29,0.08);
  --shadow-3: 0 8px 28px rgba(25,24,29,0.12);
  --shadow-4: 0 18px 48px rgba(25,24,29,0.16);

  /* ----------  MOTION  (aligned to @carbon/motion)  ----------
     Productive easings for UI; expressive for brand moments.       */
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
  --ease-standard-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance-expressive: cubic-bezier(0, 0, 0.3, 1);
  --ease-exit-expressive: cubic-bezier(0.4, 0.14, 1, 1);
  /* Carbon duration scale */
  --dur-fast-01: 70ms;
  --dur-fast-02: 110ms;
  --dur-moderate-01: 150ms;
  --dur-moderate-02: 240ms;
  --dur-slow-01: 400ms;
  --dur-slow-02: 700ms;
  /* working aliases */
  --dur-fast: 110ms;
  --dur-base: 150ms;
  --dur-slow: 400ms;

  /* ----------  LAYOUT  ---------- */
  --container: 1312px;
  --container-narrow: 768px;
  --gutter: var(--grid-margin);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus);

  /* ----------  DATA VISUALISATION  ----------
     Categorical sequence (brand-led), then sequential/diverging.   */
  --dv-1: #1450e0; /* blue (primary)     */
  --dv-2: #13b8d4; /* cyan               */
  --dv-3: #35d07a; /* green              */
  --dv-4: #ea3b1a; /* orange             */
  --dv-5: #0a2f8f; /* deep blue          */
  --dv-6: #9a6a12; /* ochre              */
  --dv-grid: var(--ink-200);
  --dv-axis: var(--ink-500);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ds-display-2xl { font:var(--w-light) var(--fs-display-2xl)/var(--lh-tight) var(--font-sans); letter-spacing:var(--tracking-display); color:var(--fg-1); }
.ds-display-xl  { font:var(--w-light) var(--fs-display-xl)/var(--lh-display) var(--font-sans); letter-spacing:var(--tracking-display); color:var(--fg-1); }
.ds-display-l   { font:var(--w-light) var(--fs-display-l)/var(--lh-display) var(--font-sans); letter-spacing:var(--tracking-display); color:var(--fg-1); }
.ds-h1 { font:var(--w-regular) var(--fs-h1)/var(--lh-heading) var(--font-sans); letter-spacing:var(--tracking-heading); color:var(--fg-1); }
.ds-h2 { font:var(--w-regular) var(--fs-h2)/var(--lh-heading) var(--font-sans); letter-spacing:var(--tracking-heading); color:var(--fg-1); }
.ds-h3 { font:var(--w-medium) var(--fs-h3)/var(--lh-snug) var(--font-sans); letter-spacing:var(--tracking-heading); color:var(--fg-1); }
.ds-h4 { font:var(--w-medium) var(--fs-h4)/var(--lh-snug) var(--font-sans); color:var(--fg-1); }
.ds-body-l { font:var(--w-regular) var(--fs-body-l)/var(--lh-body) var(--font-sans); color:var(--fg-2); }
.ds-body   { font:var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color:var(--fg-2); }
.ds-body-s { font:var(--w-regular) var(--fs-body-s)/var(--lh-body) var(--font-sans); color:var(--fg-2); }
.ds-label  { font:var(--w-semibold) var(--fs-label)/1.2 var(--font-sans); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--fg-1); }
.ds-overline { font:var(--w-semibold) var(--fs-overline)/1.2 var(--font-sans); letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--fg-3); }
.ds-caption { font:var(--w-regular) var(--fs-caption)/1.4 var(--font-sans); color:var(--fg-3); }
.ds-code { font:var(--w-regular) var(--fs-body-s)/var(--lh-snug) var(--font-mono); color:var(--fg-1); }

/* ============================================================
   WORDMARK  (per logo.html — Karbon Semibold, cobalt + orange dot)
   ============================================================ */
.ds-wordmark { font-family:var(--font-sans); font-weight:600; letter-spacing:-0.01em; color:var(--ink-900); line-height:1; }
.ds-wordmark .dot { color:var(--orange); }
.ds-wordmark.on-blue { color:#fff; }          /* white on dark / flow grounds */
.ds-wordmark.on-blue .dot { color:var(--orange); }

/* Thin-line icon helper: apply to Lucide/inline SVGs */
.ds-icon svg, svg.ds-icon { stroke-width: var(--icon-stroke); }