/**
 * Atemra Industrial Aesthetic — Design Tokens v2.1
 * ─────────────────────────────────────────────────
 * Source:  DESIGN_SYSTEM_VARIABLES.md  (old token names, preserved)
 * DNA:     DESIGN.md                   (Atemra Industrial Aesthetic)
 *
 * Architecture:
 *   :root              → Dark theme (dark-first, default)
 *   [data-theme="light"] → Light theme (Warm Sand base)
 *
 * Migration summary:
 *   Accent:       #83c6e0 (blue)         → #93A67E / #b9cda3 (Matte Olive)
 *   Backgrounds:  #080810 (cool-dark)    → #131411 (warm graphite)
 *   Light base:   #e4eaff (blue-tinted)  → #fff8f0 (Warm Sand)
 *   Border-radius: rounded               → 0px (all UI containers)
 *   Fonts:        Cyrge / system-ui      → Source Serif 4 + IBM Plex Sans
 *   Shadows:      box-shadow             → tonal hairline borders (none)
 *   Light accent: #5cc4ed (blue)         → #506053 / #7B8C7E (Sage/Moss)
 */

/* ═══════════════════════════════════════════════════════
   DARK THEME (default — Atemra Industrial)
   Ground: warm graphite #131411
   Accent: Matte Olive #93A67E / Pistachio #b9cda3
═══════════════════════════════════════════════════════ */
:root {

  /* ── Theme flag ── */
  --theme: dark;

  /* ─────────────────────────────────────────────
     SURFACE SCALE
     Tonal depth layers — no shadows
  ───────────────────────────────────────────── */
  --color-surface:                   #131411;
  --color-surface-dim:               #0e0f0c;
  --color-surface-bright:            #393936;
  --color-surface-container-lowest:  #0e0f0c;
  --color-surface-container-low:     #1b1c19;
  --color-surface-container:         #1f201d;
  --color-surface-container-high:    #292a27;
  --color-surface-container-highest: #343532;

  /* ─────────────────────────────────────────────
     SEMANTIC BACKGROUNDS
  ───────────────────────────────────────────── */
  --color-bg-main-dark-semantic:         #131411;
  --color-bg-card-dark-semantic:         #1b1c19;
  --color-bg-card-dark-alt-semantic:     #1f201d;
  --color-bg-modal-semantic:             #1f201d;

  /* Light bg tokens — inactive in dark theme, defined for completeness */
  --color-bg-main-light-semantic:        #fff8f0;
  --color-bg-card-light-semantic:        #f5ede2;
  --color-bg-card-light-alt-semantic:    #ede0d2;
  --color-bg-light:                      #fff8f0;
  --color-bg-light-alt:                  #f5ede2;
  --color-bg-light-card:                 #fdf4eb;

  /* ─────────────────────────────────────────────
     PRIMARY ACCENT — Matte Olive / Pistachio
  ───────────────────────────────────────────── */
  --color-primary:                   #b9cda3;
  --color-primary-dim:               #93A67E;
  --color-primary-container:         #93A67E;
  --color-primary-deep:              #526441;
  --color-on-primary:                #253517;
  --color-on-primary-container:      #2b3b1c;
  --color-inverse-primary:           #526441;
  --color-primary-fixed:             #d5e9bd;
  --color-primary-fixed-dim:         #b9cda3;
  --color-on-primary-fixed:          #111f04;
  --color-on-primary-fixed-variant:  #3b4c2b;

  /* Semantic accent aliases (replaces blue) */
  --color-accent-primary-dark-semantic:  #93A67E;
  --color-accent-primary-light-semantic: #b9cda3;

  /* ─────────────────────────────────────────────
     SECONDARY
  ───────────────────────────────────────────── */
  --color-secondary:                 #c9c6c5;
  --color-on-secondary:              #313030;
  --color-secondary-container:       #484646;
  --color-on-secondary-container:    #b8b4b4;
  --color-secondary-fixed:           #e6e1e1;
  --color-secondary-fixed-dim:       #c9c6c5;
  --color-on-secondary-fixed:        #1c1b1b;
  --color-on-secondary-fixed-variant:#484646;

  /* ─────────────────────────────────────────────
     TERTIARY
  ───────────────────────────────────────────── */
  --color-tertiary:                  #e7bad2;
  --color-on-tertiary:               #452739;
  --color-tertiary-container:        #be94ab;
  --color-on-tertiary-container:     #4c2d40;
  --color-tertiary-fixed:            #ffd8ec;
  --color-tertiary-fixed-dim:        #e7bad2;
  --color-on-tertiary-fixed:         #2d1224;
  --color-on-tertiary-fixed-variant: #5e3d50;

  /* ─────────────────────────────────────────────
     ON-SURFACE TEXT SCALE
  ───────────────────────────────────────────── */
  --color-on-surface:                #e4e2dd;
  --color-on-surface-variant:        #c5c8bc;
  --color-inverse-surface:           #e4e2dd;
  --color-inverse-on-surface:        #30312d;

  /* Semantic text */
  --color-heading-dark-semantic:          #e4e2dd;
  --color-text-main-dark-semantic:        #e4e2dd;
  --color-text-secondary-dark-semantic:   #c5c8bc;
  --color-text-muted-dark-semantic:       #8f9287;

  /* Light text tokens — inactive in dark, defined for completeness */
  --color-heading-light-semantic:         #1e1b14;
  --color-text-main-light-semantic:       #1e1b14;
  --color-text-secondary-light-semantic:  #4a4740;
  --color-text-muted-light-semantic:      #7a766e;

  /* oklch variants */
  --color-text-primary-dark:         oklch(0.90 0.010 90);
  --color-text-secondary-dark:       oklch(0.72 0.010 90);
  --color-text-muted-dark:           oklch(0.56 0.008 90);

  /* ─────────────────────────────────────────────
     OUTLINE / HAIRLINES
  ───────────────────────────────────────────── */
  --color-outline:                   #8f9287;
  --color-outline-variant:           #45483f;
  --color-outline-hairline:          #2A2927;

  /* Semantic border */
  --color-border-divider-dark-semantic:  #45483f;
  --color-border-primary:            oklch(0.30 0.012 90);
  --color-border-primary-dark:       oklch(0.28 0.014 90);
  --color-border-secondary:          oklch(0.22 0.010 90);
  --color-border-secondary-dark:     oklch(0.20 0.012 90);
  --color-border-glass:              oklch(0.55 0.050 90 / 0.20);

  /* ─────────────────────────────────────────────
     STATUS — Quiet luxury, low saturation
     Shape: sharp squares (not circles)
  ───────────────────────────────────────────── */
  --color-error:                     #ffb4ab;
  --color-on-error:                  #690005;
  --color-error-container:           #93000a;
  --color-on-error-container:        #ffdad6;

  --color-success:                   oklch(0.62 0.09 140);
  --color-warning:                   oklch(0.68 0.09 75);
  --color-info:                      oklch(0.62 0.07 90);
  --color-hover:                     #b9cda3;
  --color-active:                    #93A67E;
  --color-disabled:                  #45483f;

  --color-status-success:            #93A67E;
  --color-status-success-text:       #111f04;
  --color-status-warning:            oklch(0.68 0.09 75);
  --color-status-warning-text:       #1f201d;
  --color-status-error:              #93000a;
  --color-status-error-text:         #ffb4ab;

  --color-status-success-bg-dark:    rgba(147, 166, 126, 0.12);
  --color-status-success-border-dark:#526441;
  --color-status-error-bg-dark:      rgba(147, 0, 10, 0.12);
  --color-status-error-border-dark:  #93000a;
  --color-status-success-bg-light:   #eef3e8;
  --color-status-success-border-light:#b9cda3;
  --color-status-error-bg-light:     #f5e8e6;
  --color-status-error-border-light: #c9968f;

  /* ─────────────────────────────────────────────
     BADGES & TAGS
  ───────────────────────────────────────────── */
  --color-badge-bg-dark-semantic:         #2b3b1c;
  --color-badge-tag-bg-dark-semantic:     #2b3b1c;
  --color-badge-tag-text-dark-semantic:   #b9cda3;
  --color-badge-bg-light-semantic:        #dce8cc;
  --color-badge-tag-bg-light-semantic:    #dce8cc;
  --color-badge-tag-text-light-semantic:  #3b4c2b;

  --color-meta-icon-dark-semantic:        #8f9287;
  --color-meta-text-dark-semantic:        #8f9287;
  --color-meta-icon-light-semantic:       #7a766e;
  --color-meta-text-light-semantic:       #7a766e;

  --color-tag-bg-dark:    rgba(43, 59, 28, 0.40);
  --color-tag-text-dark:  #b9cda3;
  --color-tag-bg-light:   rgba(80, 96, 83, 0.12);
  --color-tag-text-light: #3b4c2b;

  /* ─────────────────────────────────────────────
     BUTTONS
  ───────────────────────────────────────────── */
  --color-button-primary:             #93A67E;
  --color-button-primary-text:        #1f201d;
  --color-button-primary-hover:       #b9cda3;
  --color-button-primary-focus:       #93A67E;

  --color-button-secondary:           transparent;
  --color-button-secondary-dark:      transparent;
  --color-button-secondary-text:      #b9cda3;
  --color-button-secondary-text-dark: #b9cda3;
  --color-button-secondary-hover:     oklch(0.22 0.010 90);
  --color-button-secondary-hover-dark:oklch(0.22 0.010 90);

  --color-button-outline-border:      #93A67E;
  --color-button-outline-border-dark: #93A67E;
  --color-button-outline-text:        #93A67E;
  --color-button-outline-text-dark:   #93A67E;
  --color-button-outline-hover:       oklch(0.22 0.010 90);
  --color-button-outline-hover-dark:  oklch(0.18 0.010 90);

  --color-link:       #b9cda3;
  --color-link-hover: #93A67E;

  /* ─────────────────────────────────────────────
     GLASS SURFACES
  ───────────────────────────────────────────── */
  --color-bg-image-placeholder-dark-semantic: #1b1c19;
  --color-bg-dark-card-glass:        oklch(0.13 0.010 90 / 0.70);
  --color-bg-dark-glass:             oklch(0.10 0.010 90 / 0.85);
  --color-bg-dark-alt-glass:         oklch(0.12 0.010 90 / 0.75);
  --color-bg-dark-alt-light-glass:   oklch(0.18 0.010 90 / 0.50);
  --color-white-glass-subtle:        oklch(1.0 0.0 90 / 0.06);
  --color-primary-glass-light:       oklch(0.55 0.080 90 / 0.12);
  --color-primary-glass-strong:      oklch(0.55 0.080 90 / 0.25);

  /* ─────────────────────────────────────────────
     GRAY SCALE — Olive-tinted warm grays
  ───────────────────────────────────────────── */
  --color-gray-50:   oklch(0.97 0.005 90);
  --color-gray-100:  oklch(0.93 0.007 90);
  --color-gray-200:  oklch(0.86 0.008 90);
  --color-gray-300:  oklch(0.76 0.008 90);
  --color-gray-400:  oklch(0.60 0.007 90);
  --color-gray-500:  oklch(0.50 0.006 90);
  --color-gray-600:  oklch(0.40 0.005 90);
  --color-gray-700:  oklch(0.30 0.005 90);
  --color-gray-800:  oklch(0.20 0.004 90);
  --color-gray-900:  oklch(0.12 0.004 90);
  --color-white:     oklch(0.98 0.006 75);  /* Warm Sand white */
  --color-black:     oklch(0.10 0.010 75);  /* Deep Charcoal */

  /* ─────────────────────────────────────────────
     GRAPH / DATA
  ───────────────────────────────────────────── */
  --color-graph-primary:   #93A67E;
  --color-graph-secondary: #c5c8bc;
  --color-graph-tertiary:  #e7bad2;
  --color-graph-blog:      #93A67E;
  --color-graph-cases:     #b9cda3;
  --color-graph-services:  #c9c6c5;

  /* ─────────────────────────────────────────────
     GRADIENTS — Surface transitions only
  ───────────────────────────────────────────── */
  --gradient-surface:       linear-gradient(180deg, #1b1c19 0%, #131411 100%);
  --gradient-service-card:  linear-gradient(159.55deg, #1b1c19 10%, #1f201d 100%);
  --gradient-case-card:     linear-gradient(180deg, #1b1c19 0%, #1f201d 100%);
  --gradient-article-large: linear-gradient(125.11deg, #1f201d 8%, #1b1c19 100%);
  --gradient-article-medium:linear-gradient(114.17deg, #1f201d 7%, #1b1c19 100%);
  --gradient-card:          linear-gradient(135deg, #93A67E 0%, #b9cda3 100%);
  --gradient-text:          linear-gradient(135deg, #93A67E 0%, #b9cda3 100%);
  --gradient-organic:       linear-gradient(135deg, #93A67E 0%, #b9cda3 50%, #d5e9bd 100%);
  --gradient-blur-dark-semantic:  linear-gradient(135deg, #93A67E 0%, #526441 100%);
  --gradient-blur-light-semantic: linear-gradient(135deg, #7B8C7E 0%, #506053 100%);

}

/* ═══════════════════════════════════════════════════════
   LIGHT THEME — Warm Sand
   Base:   #fff8f0  (Warm Sand — NOT pure white)
   Text:   #1e1b14  (Deep Charcoal — NOT pure black)
   Accent: #506053 / #7B8C7E  (Sage / Moss)

   Design principles:
   - Tonal layering via warm sand gradations, no shadows
   - All grays warm (olive-tinted, hue ~75-90)
   - Quiet contrast — soft, readable, non-clinical
   - Same sharp corners (0px) as dark theme
═══════════════════════════════════════════════════════ */
[data-theme="light"] {

  --theme: light;

  /* ── Surface scale — warm sand tonal layers ── */
  --color-surface:                   #fff8f0;   /* Warm Sand — ground */
  --color-surface-dim:               #f5ede2;   /* Slightly deeper */
  --color-surface-bright:            #fffcf8;   /* Near-white, warm */
  --color-surface-container-lowest:  #fff8f0;
  --color-surface-container-low:     #fdf4eb;
  --color-surface-container:         #f8ece0;
  --color-surface-container-high:    #f0e2d4;
  --color-surface-container-highest: #e8d8c8;

  /* ── Semantic backgrounds ── */
  --color-bg-main-light-semantic:    #fff8f0;
  --color-bg-card-light-semantic:    #fdf4eb;
  --color-bg-card-light-alt-semantic:#f8ece0;
  --color-bg-light:                  #fff8f0;
  --color-bg-light-alt:              #fdf4eb;
  --color-bg-light-card:             #fdf4eb;

  /* Dark bg — inactive in light theme */
  --color-bg-main-dark-semantic:     #131411;
  --color-bg-card-dark-semantic:     #1b1c19;
  --color-bg-card-dark-alt-semantic: #1f201d;
  --color-bg-modal-semantic:         #f8ece0;

  /* ── Primary accent — Sage / Moss ── */
  --color-primary:                   #7B8C7E;   /* Sage — main accent */
  --color-primary-dim:               #506053;   /* Moss — deeper action */
  --color-primary-container:         #dce8cc;   /* Pale pistachio container */
  --color-primary-deep:              #3a4a3d;   /* Deepest — hover/pressed */
  --color-on-primary:                #ffffff;
  --color-on-primary-container:      #1a2e1d;
  --color-inverse-primary:           #b9cda3;
  --color-primary-fixed:             #eaf2df;
  --color-primary-fixed-dim:         #d0e2be;
  --color-on-primary-fixed:          #0e1f10;
  --color-on-primary-fixed-variant:  #3a4a3d;

  /* Semantic accent aliases */
  --color-accent-primary-dark-semantic:  #506053;
  --color-accent-primary-light-semantic: #7B8C7E;

  /* ── Secondary ── */
  --color-secondary:                 #7a766e;
  --color-on-secondary:              #fff8f0;
  --color-secondary-container:       #ede0d2;
  --color-on-secondary-container:    #2c2820;
  --color-secondary-fixed:           #e8e0d8;
  --color-secondary-fixed-dim:       #d4ccc4;
  --color-on-secondary-fixed:        #1c1814;
  --color-on-secondary-fixed-variant:#4a4740;

  /* ── Tertiary — soft mauve ── */
  --color-tertiary:                  #8c6878;
  --color-on-tertiary:               #fff8f0;
  --color-tertiary-container:        #f0d8e4;
  --color-on-tertiary-container:     #2d1224;
  --color-tertiary-fixed:            #fae8f0;
  --color-tertiary-fixed-dim:        #e8c8d8;
  --color-on-tertiary-fixed:         #1e0a14;
  --color-on-tertiary-fixed-variant: #5e3d50;

  /* ── Text scale — Deep Charcoal ── */
  --color-on-surface:                #1e1b14;   /* Deep Charcoal */
  --color-on-surface-variant:        #4a4740;   /* Mid charcoal */
  --color-inverse-surface:           #1e1b14;
  --color-inverse-on-surface:        #fff8f0;

  --color-heading-light-semantic:    #1e1b14;
  --color-heading-dark-semantic:     #1e1b14;   /* Override for active theme */
  --color-text-main-light-semantic:  #1e1b14;
  --color-text-main-dark-semantic:   #1e1b14;   /* Override */
  --color-text-secondary-light-semantic: #4a4740;
  --color-text-secondary-dark-semantic:  #4a4740;
  --color-text-muted-light-semantic: #7a766e;
  --color-text-muted-dark-semantic:  #7a766e;

  --color-text-primary-dark:         oklch(0.14 0.012 75);
  --color-text-secondary-dark:       oklch(0.35 0.010 75);
  --color-text-muted-dark:           oklch(0.52 0.008 80);

  /* ── Outline / Hairlines — warm, not cool ── */
  --color-outline:                   #9a9188;   /* Warm gray */
  --color-outline-variant:           #c8bfb4;   /* Subtle warm line */
  --color-outline-hairline:          #e4d8cc;   /* Near-invisible warm grid */

  --color-border-divider-dark-semantic:  #c8bfb4;
  --color-border-primary:            oklch(0.72 0.015 80);
  --color-border-primary-dark:       oklch(0.68 0.018 80);
  --color-border-secondary:          oklch(0.80 0.012 80);
  --color-border-secondary-dark:     oklch(0.76 0.014 80);
  --color-border-glass:              oklch(0.40 0.040 80 / 0.15);

  /* ── Status — light variants ── */
  --color-error:                     #8B3A3A;
  --color-on-error:                  #fff8f0;
  --color-error-container:           #f5e0dc;
  --color-on-error-container:        #5a1a1a;

  --color-success:                   oklch(0.42 0.08 140);
  --color-warning:                   oklch(0.45 0.08 75);
  --color-info:                      oklch(0.42 0.06 90);
  --color-hover:                     #506053;
  --color-active:                    #3a4a3d;
  --color-disabled:                  #c8bfb4;

  --color-status-success:            #506053;
  --color-status-success-text:       #fff8f0;
  --color-status-warning:            oklch(0.45 0.08 75);
  --color-status-warning-text:       #fff8f0;
  --color-status-error:              #8B3A3A;
  --color-status-error-text:         #fff8f0;

  --color-status-success-bg-light:   #eef3e8;
  --color-status-success-border-light:#7B8C7E;
  --color-status-error-bg-light:     #f5e8e6;
  --color-status-error-border-light: #c9968f;
  --color-status-success-bg-dark:    rgba(80, 96, 83, 0.10);
  --color-status-success-border-dark:#7B8C7E;
  --color-status-error-bg-dark:      rgba(139, 58, 58, 0.10);
  --color-status-error-border-dark:  #8B3A3A;

  /* ── Badges & Tags — light ── */
  --color-badge-bg-dark-semantic:        #dce8cc;
  --color-badge-tag-bg-dark-semantic:    #dce8cc;
  --color-badge-tag-text-dark-semantic:  #3a4a3d;
  --color-badge-bg-light-semantic:       #dce8cc;
  --color-badge-tag-bg-light-semantic:   #dce8cc;
  --color-badge-tag-text-light-semantic: #3a4a3d;

  --color-meta-icon-dark-semantic:       #9a9188;
  --color-meta-text-dark-semantic:       #9a9188;
  --color-meta-icon-light-semantic:      #7a766e;
  --color-meta-text-light-semantic:      #7a766e;

  --color-tag-bg-dark:    rgba(80, 96, 83, 0.12);
  --color-tag-text-dark:  #3a4a3d;
  --color-tag-bg-light:   rgba(80, 96, 83, 0.12);
  --color-tag-text-light: #3a4a3d;

  /* ── Buttons — light ── */
  --color-button-primary:             #506053;
  --color-button-primary-text:        #fff8f0;
  --color-button-primary-hover:       #7B8C7E;
  --color-button-primary-focus:       #506053;

  --color-button-secondary:           transparent;
  --color-button-secondary-dark:      transparent;
  --color-button-secondary-text:      #506053;
  --color-button-secondary-text-dark: #506053;
  --color-button-secondary-hover:     rgba(80, 96, 83, 0.08);
  --color-button-secondary-hover-dark:rgba(80, 96, 83, 0.08);

  --color-button-outline-border:      #506053;
  --color-button-outline-border-dark: #506053;
  --color-button-outline-text:        #506053;
  --color-button-outline-text-dark:   #506053;
  --color-button-outline-hover:       rgba(80, 96, 83, 0.06);
  --color-button-outline-hover-dark:  rgba(80, 96, 83, 0.10);

  --color-link:       #506053;
  --color-link-hover: #3a4a3d;

  /* ── Glass surfaces — warm, subtle ── */
  --color-bg-image-placeholder-dark-semantic: #f0e2d4;
  --color-bg-dark-card-glass:        oklch(0.97 0.010 75 / 0.70);
  --color-bg-dark-glass:             oklch(0.96 0.012 75 / 0.85);
  --color-bg-dark-alt-glass:         oklch(0.94 0.014 75 / 0.75);
  --color-bg-dark-alt-light-glass:   oklch(0.92 0.010 75 / 0.50);
  --color-white-glass-subtle:        oklch(1.0 0.0 75 / 0.50);
  --color-primary-glass-light:       oklch(0.42 0.060 90 / 0.08);
  --color-primary-glass-strong:      oklch(0.42 0.060 90 / 0.18);

  /* ── Gray scale — warm (sand-tinted) ── */
  --color-gray-50:   oklch(0.98 0.008 75);  /* Nearly Warm Sand */
  --color-gray-100:  oklch(0.95 0.010 75);
  --color-gray-200:  oklch(0.90 0.012 78);
  --color-gray-300:  oklch(0.82 0.012 78);
  --color-gray-400:  oklch(0.68 0.010 78);
  --color-gray-500:  oklch(0.55 0.008 78);
  --color-gray-600:  oklch(0.44 0.008 78);
  --color-gray-700:  oklch(0.34 0.008 78);
  --color-gray-800:  oklch(0.24 0.008 75);
  --color-gray-900:  oklch(0.14 0.010 75);
  --color-white:     oklch(0.99 0.006 75);  /* Warm Sand white */
  --color-black:     oklch(0.12 0.012 75);  /* Deep Charcoal */

  /* ── Graph — muted, warm ── */
  --color-graph-primary:   #506053;
  --color-graph-secondary: #9a9188;
  --color-graph-tertiary:  #8c6878;
  --color-graph-blog:      #506053;
  --color-graph-cases:     #7B8C7E;
  --color-graph-services:  #9a9188;

  /* ── Gradients — warm sand transitions ── */
  --gradient-surface:       linear-gradient(180deg, #fdf4eb 0%, #fff8f0 100%);
  --gradient-service-card:  linear-gradient(159.55deg, #fdf4eb 10%, #f8ece0 100%);
  --gradient-case-card:     linear-gradient(180deg, #fdf4eb 0%, #f8ece0 100%);
  --gradient-article-large: linear-gradient(125.11deg, #f8ece0 8%, #fdf4eb 100%);
  --gradient-article-medium:linear-gradient(114.17deg, #f8ece0 7%, #fdf4eb 100%);
  --gradient-card:          linear-gradient(135deg, #506053 0%, #7B8C7E 100%);
  --gradient-text:          linear-gradient(135deg, #506053 0%, #7B8C7E 100%);
  --gradient-organic:       linear-gradient(135deg, #506053 0%, #7B8C7E 50%, #dce8cc 100%);
  --gradient-blur-dark-semantic:  linear-gradient(135deg, #7B8C7E 0%, #506053 100%);
  --gradient-blur-light-semantic: linear-gradient(135deg, #7B8C7E 0%, #b9cda3 100%);

}

/* ═══════════════════════════════════════════════════════
   SHARED TOKENS (theme-independent)
═══════════════════════════════════════════════════════ */
:root {

  /* ─────────────────────────────────────────────
     TYPOGRAPHY
     Source Serif 4: editorial authority, display, headings
     IBM Plex Sans:  technical clarity, body, data, labels
     Cyrge:          DEPRECATED — falls back to Source Serif 4
  ───────────────────────────────────────────── */
  --font-family-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-family-body:    'IBM Plex Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-family-mono:    'IBM Plex Sans', 'Courier New', monospace;
  --font-family-base:    var(--font-family-body); /* Legacy alias */

  /* Type scale */
  --font-size-xs:   0.75rem;    /* 12px — label-caps */
  --font-size-sm:   0.875rem;   /* 14px — data-mono */
  --font-size-base: 1rem;       /* 16px — body */
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.5rem;     /* 24px — h2 */
  --font-size-2xl:  2rem;       /* 32px — h1 */
  --font-size-3xl:  3rem;       /* 48px — display */
  --font-size-hero: clamp(2.5rem, 5vw, 4rem);

  /* Weights */
  --font-weight-light:  350;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;

  /* Line heights */
  --line-height-hero:    1.05;
  --line-height-tight:   1.2;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  /* Letter spacing */
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-heading: -0.01em;
  --letter-spacing-normal:   0.01em;
  --letter-spacing-wide:     0.05em;
  --letter-spacing-caps:     0.10em;
  --letter-spacing-logo:     0.14em;
  --letter-spacing-brand:    0.20em;
  --letter-spacing-contact:  0.25em;

  /* ─────────────────────────────────────────────
     SPACING — 4px base unit
  ───────────────────────────────────────────── */
  --spacing-unit:   4px;
  --spacing-0:      0;
  --spacing-1:      0.25rem;   /* 4px   — xs */
  --spacing-2:      0.5rem;    /* 8px   — sm */
  --spacing-3:      0.75rem;   /* 12px */
  --spacing-4:      1rem;      /* 16px  — md */
  --spacing-5:      1.25rem;   /* 20px */
  --spacing-6:      1.5rem;    /* 24px  — gutter */
  --spacing-8:      2rem;      /* 32px  — lg */
  --spacing-10:     2.5rem;    /* 40px */
  --spacing-12:     3rem;      /* 48px  — margin */
  --spacing-16:     4rem;      /* 64px  — xl */
  --spacing-20:     5rem;      /* 80px */
  --spacing-24:     6rem;      /* 96px */

  /* Named aliases */
  --spacing-xs:     var(--spacing-1);
  --spacing-sm:     var(--spacing-2);
  --spacing-md:     var(--spacing-4);
  --spacing-lg:     var(--spacing-8);
  --spacing-xl:     var(--spacing-16);
  --spacing-gutter: var(--spacing-6);
  --spacing-margin: var(--spacing-12);

  /* ─────────────────────────────────────────────
     SHAPE — ALL SHARP (0px)
     Exception: --radius-full for icons only
  ───────────────────────────────────────────── */
  --radius-none:   0;
  --radius-sm:     0;
  --radius-md:     0;
  --radius-lg:     0;
  --radius-xl:     0;
  --radius-2xl:    0;
  --radius-full:   9999px;  /* Icon-only exception */
  --radius-button: 0;
  --radius-card:   0;
  --radius-input:  0;
  --radius-chip:   0;
  --radius-badge:  0;  /* Sharp squares for status */

  /* ─────────────────────────────────────────────
     ELEVATION — TONAL, NOT SHADOWS
     All shadow tokens → none
     Use --border-* tokens for depth
  ───────────────────────────────────────────── */
  --shadow-none:      none;
  --shadow-sm:        none;
  --shadow-md:        none;
  --shadow-lg:        none;
  --shadow-xl:        none;
  --shadow-2xl:       none;
  --shadow-header:    none;
  --shadow-card:      none;
  --shadow-card-glow: none;

  /* Tonal border system (use these instead of shadows) */
  --border-ground:   1px solid var(--color-outline-hairline);
  --border-surface:  1px solid var(--color-outline-variant);
  --border-raised:   1px solid var(--color-outline);
  --border-accent:   1px solid var(--color-primary-dim);

  /* ─────────────────────────────────────────────
     COMPONENT SIZES
  ───────────────────────────────────────────── */
  --size-control-height:           2.8125rem;
  --size-control-square:           2.75rem;
  --size-language-switcher-width:  4.375rem;
  --size-mobile-menu-button-width: 7.125rem;
  --size-header-height-mobile:     5.3125rem;
  --size-header-height-desktop:    6.25rem;
  --size-logo-box-mobile-h:        2.75rem;
  --size-logo-box-mobile-w:        2.25rem;
  --size-logo-box-desktop:         3.75rem;
  --size-mobile-menu-width:        17.5rem;
  --size-card-article-large:       30rem;
  --size-card-article-medium:      30rem;
  --size-card-case-mobile:         27rem;
  --size-card-case-desktop:        28rem;
  --size-hero-blob-lg:             32rem;
  --size-hero-blob-md:             28rem;

  /* ─────────────────────────────────────────────
     MOTION — Restrained, ease-out only
  ───────────────────────────────────────────── */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease-out;
  --transition-slow: 500ms ease-out;

  /* ─────────────────────────────────────────────
     BLUR
  ───────────────────────────────────────────── */
  --blur-sm:  4px;
  --blur-md: 10px;
  --blur-lg: 20px;
  --blur-xl: 40px;

}

/* ═══════════════════════════════════════════════════════
   MIGRATION COMPATIBILITY ALIASES
   Legacy variable names pointing to new values
═══════════════════════════════════════════════════════ */
:root {
  --surface-tint:    var(--color-primary);
  --background:      var(--color-surface);
  --on-background:   var(--color-on-surface);
  --surface-variant: var(--color-surface-container-highest);
}

/* ═══════════════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-normal);
  color: var(--color-on-surface);
}


/* ═══════════════════════════════════════════════════════════════════════
   ATEMRA v3 — "Tungsten & Copper" palette (2026-05)
   ─────────────────────────────────────────────────────────────────────
   WHY: v2.1 Matte Olive accent did not read as premium-industrial for the
        CNC / cutting-tool audience. Olive skewed botanical. The business-
        card visual identity uses warm ember-orange on graphite; that DNA
        must carry forward, but pure orange (#e8871e) burns out at large
        scale and reads "consumer / warning sign". Copper is the material
        language of the niche (cutting inserts, brazing, bronze brushes),
        reads dearer, and pairs cleanly with tungsten-cool graphite.

   WHAT:
     • Ground / surface / hairlines  → cool tungsten graphite scale.
     • Accent                        → copper #c8742c (primary), polished
                                       copper #e3a567 (hover/secondary),
                                       patina #5a2f0e (deep fills).
     • Brushed-metal muted accent   → #a08a6e (rare, secondary metadata).
     • Type pairing kept (Source Serif 4 display + IBM Plex Sans body).
     • Sharp 0px corners kept globally.
     • All shadows kept "none"; depth via tonal layers + hairlines.

   USAGE NOTE FOR LLM:
     These tokens OVERRIDE the v2.1 olive accents because they appear
     later in the cascade. Old olive aliases stay defined so legacy
     selectors do not break — but new components MUST consume v3 names
     where possible (--atemra-*). Migrate progressively.
═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Atemra v3 — direct palette ── */
  --atemra-ground:           #0e0f11;   /* Tungsten — deepest, page bg */
  --atemra-surface:          #16181b;   /* Cards, lockup containers */
  --atemra-surface-raised:   #1d2024;   /* Hover, active band */
  --atemra-surface-high:     #24272c;   /* Inline chips on raised */
  --atemra-hairline:         #2a2d31;   /* 1px tonal divider */
  --atemra-hairline-strong:  #3a3e44;   /* Frame corners, focus rings */
  --atemra-hairline-20:      rgba(58, 62, 68, 0.20);
  --atemra-hairline-44:      rgba(58, 62, 68, 0.44);
  --atemra-hairline-50:      rgba(58, 62, 68, 0.50);
  --atemra-hairline-68:      rgba(58, 62, 68, 0.68);
  --atemra-hairline-72:      rgba(58, 62, 68, 0.72);
  --atemra-ground-42:        rgba(14, 15, 17, 0.42);
  --atemra-ground-62:        rgba(14, 15, 17, 0.62);
  --atemra-ground-20:        rgba(14, 15, 17, 0.20);

  --atemra-text:             #ece9e2;   /* Bone white — body / H1 */
  --atemra-text-muted:       #a3a6ab;   /* Subhead, captions */
  --atemra-text-faint:       #6b6e74;   /* Metadata, mono labels */

  --atemra-copper:           #c8742c;   /* PRIMARY accent — CTA, italic */
  --atemra-copper-hover:     #e3a567;   /* Polished — hover, link hover */
  --atemra-copper-deep:      #5a2f0e;   /* Patina — chip bg, focus halo */
  --atemra-copper-ghost:     rgba(200,116,44,0.10);  /* Subtle wash */
  --atemra-brass-muted:      #a08a6e;   /* Brushed metal — rare meta */

  /* ── v3 semantic remaps (override v2.1 cascade) ── */
  --color-surface:                       var(--atemra-ground);
  --color-surface-dim:                   #0a0b0d;
  --color-surface-bright:                var(--atemra-surface-high);
  --color-surface-container-lowest:      #0a0b0d;
  --color-surface-container-low:         var(--atemra-surface);
  --color-surface-container:             var(--atemra-surface-raised);
  --color-surface-container-high:        var(--atemra-surface-high);
  --color-surface-container-highest:     #2e3137;

  --color-bg-main-dark-semantic:         var(--atemra-ground);
  --color-bg-card-dark-semantic:         var(--atemra-surface);
  --color-bg-card-dark-alt-semantic:     var(--atemra-surface-raised);

  /* WHY: copper replaces olive primary across all aliases */
  --color-primary:                       var(--atemra-copper);
  --color-primary-dim:                   var(--atemra-copper-hover);
  --color-primary-container:             var(--atemra-copper-deep);
  --color-primary-deep:                  #3a1e08;
  --color-on-primary:                    #1a0d04;
  --color-on-primary-container:          #f4d4b3;
  --color-accent-primary-dark-semantic:  var(--atemra-copper);
  --color-accent-primary-light-semantic: var(--atemra-copper-hover);

  --color-on-surface:                    var(--atemra-text);
  --color-on-surface-variant:            var(--atemra-text-muted);
  --color-heading-dark-semantic:         var(--atemra-text);
  --color-text-main-dark-semantic:       var(--atemra-text);
  --color-text-secondary-dark-semantic:  var(--atemra-text-muted);
  --color-text-muted-dark-semantic:      var(--atemra-text-faint);

  --color-outline:                       var(--atemra-hairline-strong);
  --color-outline-variant:               var(--atemra-hairline);
  --color-outline-hairline:              var(--atemra-hairline);
  --color-border-divider-dark-semantic:  var(--atemra-hairline);

  --color-button-primary:                var(--atemra-copper);
  --color-button-primary-text:           #1a0d04;
  --color-button-primary-hover:          var(--atemra-copper-hover);
  --color-button-primary-focus:          var(--atemra-copper);
  --color-button-outline-border:         var(--atemra-copper);
  --color-button-outline-border-dark:    var(--atemra-copper);
  --color-button-outline-text:           var(--atemra-copper);
  --color-button-outline-text-dark:      var(--atemra-copper);

  --color-link:                          var(--atemra-copper);
  --color-link-hover:                    var(--atemra-copper-hover);

  --color-badge-bg-dark-semantic:        var(--atemra-copper-deep);
  --color-badge-tag-bg-dark-semantic:    var(--atemra-copper-deep);
  --color-badge-tag-text-dark-semantic:  var(--atemra-copper-hover);

  --color-tag-bg-dark:                   var(--atemra-copper-ghost);
  --color-tag-text-dark:                 var(--atemra-copper-hover);

  /* ── Type — preload-aware fluid scale for hero ── */
  --font-size-hero-display:  clamp(2rem, 4vw, 2.375rem);
  --font-size-hero-sub:      clamp(1.0625rem, 1.1vw + 0.85rem, 1.375rem);
  --font-size-eyebrow:       0.6875rem;   /* 11px — meta caps */
  --letter-spacing-meta:     0.18em;

  /* ── Hero-specific layout tokens ── */
  --hero-max-width:         84rem;       /* 1344px content cap */
  --hero-padding-block:     clamp(2rem, 5vh, 5.5rem);
  --hero-padding-inline:    clamp(1.25rem, 4vw, 3.5rem);
  --hero-grid-gap:          clamp(0.75rem, 1.5vw, 1.5rem);

  /* ── Grid background — hairline industrial draft ── */
  --hero-grid-size:         80px;

  /* ── Motion — restrained ── */
  --transition-copper:      180ms ease-out;
}

/* WHY: corner-marker mixin for the artefact "exhibit" frame.
   WHAT: 4 absolutely-positioned L-shaped corners drawn with 1px borders.
         Tokenized so component CSS stays declarative. */
:root {
  --corner-size:    14px;
  --corner-stroke:  1px;
  --corner-color:   var(--atemra-hairline-strong);
  --corner-inset:   -6px;
}