/* ============================================================
   InternetArc — "Premium Editorial Arc" design system
   Premium, editorial-first. Corporate/Modern with a minimalist lean.
   Trust and clarity through whitespace, hierarchy and trust signals.

   Layer 1  Material-3 spec tokens (authoritative, verbatim from the spec)
   Layer 2  Semantic roles the site's components actually consume
   Layer 3  Legacy aliases, so the six existing stylesheets keep working

   Accessibility notes (measured, not assumed):
     on-surface / surface .............. 16.40:1
     primary  / surface (links) ......... 6.39:1
     on-primary / primary (buttons) ..... 6.69:1
     tertiary / surface (CTA) ........... 6.39:1
     inverse-on-surface / inverse ...... 11.60:1
   The spec's prose names #6366F1 as primary, but that is 4.26:1 on
   surface and fails WCAG AA for body text. The token block's #4648d4
   (6.39:1) is used instead — it is both authoritative and accessible.
   ============================================================ */

:root {
  --site-title: "InternetArc";
  --site-domain: "internetarc.com";

  /* ---------- Layer 1: spec tokens ---------- */

  /* Surfaces — warm off-white, not clinical grey */
  --surface: #fcf9f8;
  --surface-dim: #dcd9d9;
  --surface-bright: #fcf9f8;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f6f3f2;
  --surface-container: #f0eded;
  --surface-container-high: #eae7e7;
  --surface-container-highest: #e5e2e1;
  --surface-variant: #e5e2e1;
  --surface-tint: #494bd6;
  --surface-white: #FFFFFF;
  --background: #fcf9f8;
  --background-subtle: #F4F5FF;

  --on-surface: #1c1b1b;
  --on-surface-variant: #464554;
  --on-background: #1c1b1b;
  --inverse-surface: #313030;
  --inverse-on-surface: #f3f0ef;
  --text-muted: #727586;

  --outline: #767586;
  --outline-variant: #c7c4d7;

  /* Primary — indigo. Interactive elements, primary CTAs, focus. */
  --primary: #4648d4;
  --on-primary: #ffffff;
  --primary-container: #6063ee;
  --on-primary-container: #fffbff;
  --inverse-primary: #c0c1ff;
  --primary-fixed: #e1e0ff;
  --primary-fixed-dim: #c0c1ff;
  --on-primary-fixed: #07006c;
  --on-primary-fixed-variant: #2f2ebe;
  --accent-purple-deep: #673DE6;

  /* Secondary — softer charcoal-violet for supporting UI */
  --secondary: #5e5b77;
  --on-secondary: #ffffff;
  --secondary-container: #e1dcfc;
  --on-secondary-container: #62607b;
  --secondary-fixed: #e4dfff;
  --secondary-fixed-dim: #c7c3e2;
  --on-secondary-fixed: #1b1930;
  --on-secondary-fixed-variant: #46445e;

  /* Tertiary — burnt amber. Commerce moments only. */
  --tertiary: #904900;
  --on-tertiary: #ffffff;
  --tertiary-container: #b55d00;
  --on-tertiary-container: #fffbff;
  --tertiary-fixed: #ffdcc5;
  --tertiary-fixed-dim: #ffb783;
  --on-tertiary-fixed: #301400;
  --on-tertiary-fixed-variant: #703700;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* Palette seeds, as shown in the brand sheet. These are the *seed* hues the
     tonal ramps were generated from — use the roles above for real UI, and
     these only where the raw brand colour is wanted (illustration, gradient
     stops, decorative fills). --brand-indigo is 4.47:1 against white, which
     is a hair under AA for 16px text, so it never carries body copy. */
  --brand-indigo: #6366F1;
  --brand-charcoal-violet: #36344D;
  --brand-burnt-amber: #B95F00;
  --brand-neutral: #1A1A1A;

  /* Logo gradient — sampled from the wordmark, for identity moments only */
  --brand-violet: #6B00F5;
  --brand-blue: #0033F9;
  --brand-cyan: #00A5FB;
  --brand-gradient: linear-gradient(135deg, #6B00F5 0%, #0033F9 55%, #00A5FB 100%);

  /* Typography — Plus Jakarta Sans is the brand voice, DM Sans the workhorse */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  --display-lg-size: 48px;
  --display-lg-line: 56px;
  --display-lg-tracking: -0.02em;
  --display-lg-mobile-size: 32px;
  --display-lg-mobile-line: 40px;
  --display-lg-mobile-tracking: -0.01em;
  --headline-md-size: 24px;
  --headline-md-line: 32px;
  --body-lg-size: 18px;
  --body-lg-line: 28px;
  --body-md-size: 16px;
  --body-md-line: 24px;
  --meta-info-size: 14px;
  --meta-info-line: 20px;
  --label-sm-size: 12px;
  --label-sm-line: 16px;
  --label-sm-tracking: 0.05em;

  /* Shape — rounded level 2, softens the "tech" edge */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Spacing — base-8 rhythm */
  --gutter: 24px;
  --margin-desktop: 40px;
  --margin-mobile: 20px;
  --section-gap: 80px;
  --stack-sm: 8px;
  --stack-md: 16px;
  --stack-lg: 32px;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  /* Layout */
  --container-max: 1280px;
  --container-width: 1280px;
  --container-narrow: 800px;
  --header-height: 72px;

  /* Elevation — tonal layers with ambient shadows, not heavy borders */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.10);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---------- Layer 2: semantic roles ---------- */

  --color-white: var(--surface-white);
  --color-bg: var(--surface);
  --color-bg-alt: var(--surface-container-low);
  --color-border: var(--outline-variant);
  --color-border-light: var(--surface-container-high);

  --color-text: var(--on-surface);
  /* Meta/byline text. The spec's --text-muted (#727586) measures 4.35:1 on
     surface — just under the 4.5:1 AA floor, and it was carrying real
     content (datelines, read times) at 13–14px. Both muted roles therefore
     resolve to on-surface-variant, 8.95:1. --text-muted stays defined at the
     spec value for genuinely decorative use (placeholders, dividers). */
  --color-text-secondary: var(--on-surface-variant);
  --color-text-muted: var(--on-surface-variant);
  --color-text-white: var(--surface-white);

  /* NOTE: in this codebase --color-primary is the *dark chrome* role — it
     colours headings, the mobile menu panel and dark gradient slabs. It is
     not the brand interactive colour; that is --color-accent below. Renaming
     it would mean touching every call site, so the meaning is documented
     instead. Headings sit on --on-surface for a 16.4:1 read. */
  --color-primary: var(--on-surface);
  --color-primary-light: var(--secondary);
  --color-primary-dark: #000000;

  --color-accent: var(--primary);
  --color-accent-light: var(--primary-fixed-dim);
  --color-accent-dark: var(--on-primary-fixed-variant);

  --color-success: #15803D;
  --color-warning: var(--tertiary);
  --color-error: var(--error);
  --color-info: var(--primary);

  --header-bg: var(--surface-white);
  --header-text: var(--on-surface);
  --header-text-hover: var(--primary);

  /* Footer is the theme's inverse surface — a dark editorial slab, 11.6:1 */
  --footer-bg: var(--inverse-surface);
  --footer-text: rgba(243, 240, 239, 0.78);
  --footer-heading: var(--inverse-on-surface);

  /* CTA is tertiary, not primary. An affiliate button must not read as
     "just another link" — separating it from the primary indigo keeps it
     the single most salient element on the page. 6.39:1 on surface. */
  --cta-button: var(--tertiary);
  --cta-button-hover: var(--tertiary-container);
  --cta-button-text: var(--on-tertiary);

  /* ---------- Layer 3: legacy aliases ---------- */
  /* The six existing stylesheets reference these names. --header-blue-clr,
     --main-clr and --footer were referenced in 14 places but never defined,
     so those rules silently resolved to nothing (category tags rendered
     white-on-white on 77 pages). Aliased here rather than edited per site. */
  --color-teal: var(--primary);
  --color-teal-light: var(--primary-fixed-dim);
  --color-teal-dark: var(--on-primary-fixed-variant);
  --color-navy: var(--inverse-surface);
  --color-navy-light: var(--secondary);
  --color-navy-dark: #1c1b1b;
  --header-blue-clr: var(--primary);
  --main-clr: var(--primary);
  --footer: var(--inverse-surface);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
}