/* ==========================================================================
   DESIGN TOKENS — iolGenius
   Editorial / cinematic direction (11x-style reference) set in a modern sans, coloured from the
   iolGenius logo: black wordmark + amber "G" (#fcb427).
   Every value the prototype panel (js/theme-editor.js) edits lives here.
   ========================================================================== */

:root {
  /* ---- Brand (from the logo) ---- */
  --color-ink: #0e1a33;            /* brand navy (matches the logos): all text, headings, dark buttons */
  --color-ink-strong: #070e1d;     /* deeper navy for dark-button hover */
  /* Primary buttons ("Contact Us", "Get in Touch!") — trying amber with navy text, 2026-09-24.
     Navy version was: bg var(--color-ink), text var(--color-amber). */
  --color-btn-dark-bg: var(--color-amber);
  --color-btn-dark-text: var(--color-ink);
  --color-amber: #fcb427;          /* logo "G" — the single brand accent */
  --color-amber-soft: #fff4dc;     /* pale amber wash for small highlights */
  --color-amber-strong: #9a6412;   /* deep amber for small text on light backgrounds (AA contrast) */
  --gradient-accent: linear-gradient(90deg, var(--color-amber), var(--color-amber-strong));

  /* ---- Neutrals ---- */
  --color-paper: #ffffff;
  --color-bone: #f6f5f5;
  --color-sandstone: #f5ece5;
  --color-stone: #d7cecc;
  --color-iron: #e1dad9;           /* hairline borders */
  --color-pewter: #afaeae;
  --color-charcoal: #222222;
  --color-text-muted: #5b5552;

  /* ---- Dark narrative band ---- */
  --color-deep: #041333;
  --color-dark-section: #0e1215;   /* Industries We Serve background + overlay colour */
  --industries-overlay-strength: 15%; /* how much of the dark colour sits over the Industries photo */
  --alliances-overlay-strength: 85%;  /* how much of --color-deep sits over the Alliances photo */
  --color-on-deep: #ffffff;
  --color-on-deep-muted: rgba(255, 255, 255, 0.72);

  /* ---- "What We do" feature cards ---- */
  --card-software-bg: var(--color-ink);     /* Custom Software: navy */
  --card-software-text: var(--color-amber); /*   with amber text */
  --card-cloud-bg: var(--color-amber);      /* Cloud Computing (SaaS): amber */
  --card-cloud-text: var(--color-ink);      /*   with navy text */

  /* ---- Pastel card tints (spare; no longer used by the feature cards) ---- */
  --color-pastel-1: #c5d5e8;       /* dusty sky */
  --color-pastel-2: #d4e6eb;       /* mist mint */
  --color-pastel-3: #efe5f9;       /* wisteria */
  --color-pastel-4: #e7d3bf;       /* desert clay */

  /* ---- Component colours (split out so the panel can move them alone) ---- */
  --color-announce-bg: var(--color-ink);
  --color-tag-bg: var(--color-amber);
  --color-tag-text: var(--color-ink);
  --color-footer-bg: var(--color-amber);   /* footer is brand orange */
  --flip-back-bg: #090f2a;         /* flipped industry card background */
  --flip-border-color-1: #fcb427;  /* spinning ring on the back of industry cards */
  --flip-border-color-2: #0056d6;
  --card-tint-1: #ffaa00;          /* industry photo colour wash, top-left → (set via panel 2026-09-23) */
  --card-tint-2: #0061ff;          /* → bottom-right */
  --card-tint-strength-1: 20%;
  --card-tint-strength-2: 60%;

  /* ---- Logos (all left-aligned; sizes editable in the prototype panel) ---- */
  --logo-header-height: 36px;   /* header lockup (logo-header.svg), ~173px wide */
  --logo-footer-small-height: 35px;
  --logo-footer-width: 82%;       /* big footer wordmark, share of the content width */

  /* ---- Typography ---- */
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-caption: 14px;
  --text-body-sm: 16px;
  --text-body: 17px;
  --text-subheading: 19px;
  --text-heading-sm: 28px;
  --text-heading: clamp(34px, 4.2vw, 46px);
  --text-heading-lg: clamp(40px, 5.6vw, 64px);
  --text-display: clamp(48px, 6.8vw, 74px);
  --text-display-xl: clamp(64px, 11vw, 152px);

  --display-scale: 1;              /* multiplies display + heading sizes */
  --tracking-display: -0.035em;
  --tracking-heading: -0.03em;
  --tracking-body: -0.011em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heading: 500;          /* section headings */
  --weight-display: 600;          /* hero + big statements */

  /* ---- Spacing (8px base) ---- */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-128: 128px;

  /* ---- Radius ---- */
  --radius-button: 999px;
  --radius-card: 16px;
  --radius-portrait: 32px;
  --radius-badge: 8px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms var(--ease-out);

  /* ---- Layout ---- */
  --page-max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-gap: clamp(64px, 9vw, 128px);
  --nav-height: 72px;
}