/* ==========================================================================
   Onega design tokens · v1.0 · 28 September 2026
   Source of truth for every surface: web, decks, print, product marketing.
   Palette is derived from the supplied fold mark: plum #291C35, coral #FF624D,
   apricot #FFC49A. Everything else is a tint, shade or neutral of those three.
   ========================================================================== */

:root {
  /* ---- Core brand colours (from the mark) ---- */
  --plum-800: #291C35;      /* logo plum · primary surface on dark layouts */
  --coral-500: #FF624D;     /* logo coral · signal colour, CTAs on dark */
  --apricot-300: #FFC49A;   /* logo apricot · highlight, the "fold light" */

  /* ---- Plum scale (surfaces, ink) ---- */
  --plum-950: #120B18;      /* ink · deepest surface, footer, print black */
  --plum-900: #1B1224;      /* section surface */
  --plum-700: #3B2B4B;      /* raised cards on dark */
  --plum-600: #4F3E62;      /* borders on dark, disabled */
  --plum-500: #6B5A7E;      /* tertiary on dark */

  /* ---- Mauve scale (text on dark, hairlines) ---- */
  --mauve-400: #8E7FA0;     /* large text and decoration on dark only (4.3:1 on plum-800) */
  --mauve-350: #A396B1;     /* small labels on dark: 5.8:1 on plum-800, 4.6:1 on plum-700 (AA) */
  --mauve-300: #B5A9C3;     /* secondary text on dark (AA) */
  --mauve-200: #D3CBDC;

  /* ---- Bone scale (light canvas, text on dark) ---- */
  --bone-50:  #F8F5F1;      /* light canvas */
  --bone-100: #F1ECE6;      /* light panels */
  --bone-200: #E7E0D8;      /* light borders */
  --bone-300: #D2C9BF;      /* light dividers, muted icon */
  --white:    #FFFFFF;

  /* ---- Coral scale ---- */
  --coral-600: #E8503C;     /* hover on dark */
  --coral-700: #C23D2B;     /* CTA / link on light (4.8:1 on bone-50) */
  --coral-800: #9E2F20;     /* pressed on light */
  --coral-100: #FFE3DE;     /* light tint */

  /* ---- Apricot scale ---- */
  --apricot-200: #FFDCC2;
  --apricot-100: #FFF0E3;

  /* ---- Functional (status only, never decorative) ---- */
  --ok-400: #3FBF8F;  --ok-700: #2B8C68;
  --warn-400: #F0B441; --warn-700: #A97A15;
  --bad-400: #FF8F7D;  --bad-700: #B53F2E;
  --info-400: #7FB4FF; --info-700: #2F63B3;

  /* ---- Semantic aliases: dark layout (default for web + decks) ---- */
  --bg: var(--plum-800);
  --bg-deep: var(--plum-950);
  --bg-raised: var(--plum-700);
  --fg: var(--bone-50);
  --fg-muted: var(--mauve-300);
  --fg-faint: var(--mauve-350);
  --line: rgba(248, 245, 241, 0.12);
  --line-strong: rgba(248, 245, 241, 0.24);
  --accent: var(--coral-500);
  --accent-hover: var(--coral-600);
  --accent-fg: var(--plum-950);      /* text on a coral button */
  --highlight: var(--apricot-300);

  /* ---- Typography ---- */
  --font-display: "Archivo", "Archivo Fallback", "Arial Narrow", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  --display-wdth: 112;      /* Archivo width axis for headlines */
  --display-wdth-wide: 118; /* wordmark and hero numerals */
  --display-wght: 600;

  /* Type scale (rem, 1rem = 16px) · ratio 1.25 with a jump at display */
  --text-xs: 0.75rem;   /* 12 · mono eyebrows, footnotes */
  --text-sm: 0.875rem;  /* 14 · captions, table text */
  --text-md: 1.0625rem; /* 17 · body */
  --text-lg: 1.25rem;   /* 20 · lead paragraph */
  --text-xl: 1.5rem;    /* 24 · card title */
  --text-2xl: 2rem;     /* 32 · section title */
  --text-3xl: 2.75rem;  /* 44 · page title */
  --text-4xl: 3.75rem;  /* 60 · hero */
  --text-5xl: 5.25rem;  /* 84 · display, decks */

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.12em;
  --tracking-wordmark: 0.055em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;
  --gutter: 1rem;                 /* phone side gutter */
  --measure: 62ch;                /* max line length for body copy */
  --container: 76rem;             /* 1216px content width */

  /* ---- Shape ---- */
  --radius-xs: 2px;  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 14px;
  --radius-tile: 22%;             /* app tile and avatar */
  --fold-angle: -12deg;           /* the diagonal borrowed from the mark's facet */

  /* ---- Elevation (dark surfaces use light, not shadow) ---- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 32px -12px rgba(0,0,0,0.55);
  --glow-coral: 0 0 0 1px rgba(255,98,77,0.35), 0 8px 30px -10px rgba(255,98,77,0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 480ms;
}

/* Light layout: for datasheets, letterhead, long-form reading sections */
[data-theme="light"], .theme-light {
  --bg: var(--bone-50);
  --bg-deep: var(--bone-100);
  --bg-raised: var(--white);
  --fg: var(--plum-800);
  --fg-muted: #5A4E68;
  --fg-faint: #7A6E88;
  --line: rgba(41, 28, 53, 0.12);
  --line-strong: rgba(41, 28, 53, 0.28);
  --accent: var(--coral-700);
  --accent-hover: var(--coral-800);
  --accent-fg: var(--white);
  --highlight: var(--coral-500);
  --shadow-1: 0 1px 2px rgba(41,28,53,0.08);
  --shadow-2: 0 12px 32px -12px rgba(41,28,53,0.25);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* ---- Self-hosted fonts (no third-party font requests; GDPR-friendly) ---- */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-stretch: 85% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Italic-Variable.woff2") format("woff2"); font-weight: 100 700; font-stretch: 85% 100%; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Arabic (used only on /ar/ pages; unicode-range keeps them off Latin text) */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+200C-200F, U+25CC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+200C-200F, U+25CC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0600-06FF, U+200C-200F, U+25CC; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("../fonts/NotoKufiArabic-Variable.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0600-06FF, U+200C-200F, U+25CC; }

/* ---- Base type utilities (opt-in classes) ---- */
.t-display { font-family: var(--font-display); font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght); font-stretch: 112%; font-weight: 600; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.t-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-faint); }
.t-body { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }