/* ==========================================================================
   Studio ArtTec — Design tokens (source of truth)
   --------------------------------------------------------------------------
   Assembled from the Claude Design system for "Studio ArtTec Landing":
     colors.css + spacing.css + typography.css + the fonts.css @import.

   These are the exact var() names the design HTML references. Shipped as ONE
   stylesheet via the studioarttec-tokens mu-plugin, enqueued on
   wp_enqueue_scripts so it reaches both the front end AND the Oxygen 6 (Jenga)
   builder canvas (the canvas iframe renders the real front end).

   Scope: studioarttec.com only. A rebrand is an edit to THIS file (mostly the
   :root color block), then a redeploy — nothing to re-touch in the builder.

   Fonts note: real licensed webfonts via Adobe Fonts (Typekit), also imported in
   the Oxygen UI. CSS family names: helvetica-lt-pro (headings), futura-pt (body),
   eb-garamond (highlight). Kits are @import-ed here too so this stylesheet is
   self-contained and not dependent on the Oxygen font state. Available weights:
   helvetica-lt-pro 400/700, futura-pt 400/700, eb-garamond 400/700/800 — if the
   design needs 500/600, activate those weights in the Adobe kit.
   ========================================================================== */

@import url('https://use.typekit.net/xjm2kyb.css'); /* helvetica-lt-pro */
@import url('https://use.typekit.net/fzd3vhr.css'); /* futura-pt */
@import url('https://use.typekit.net/kbw4wak.css'); /* eb-garamond */

/* --------------------------------------------------------------------------
   Colors — dark by default. Ink carries surfaces, one green accent,
   sage for secondary text & lines.
   -------------------------------------------------------------------------- */
:root {
  /* Core brand */
  --ink: #111310;            /* backgrounds & surfaces */
  --arttec-green: #01DC36;   /* single accent & CTAs (canonical brand green) */
  --sage: #939D92;           /* secondary text & lines */

  /* Ink ramp — layered surfaces derived from Ink */
  --ink-900: #0B0C0A;        /* deepest — page base */
  --ink-800: #111310;        /* Ink — default surface */
  --ink-700: #191C18;        /* raised card */
  --ink-600: #22261F;        /* hover surface / inset */
  --ink-500: #2E332B;        /* borders on dark */

  /* Green ramp */
  --green-bright: #01DC36;
  --green-600: #0C8F3A;
  --green-800: #0A5E2A;
  --green-dim: rgba(1, 220, 54, 0.14);   /* tint fills, focus rings */

  /* Neutrals */
  --white: #F4F6F3;
  --sage-light: #B9C1B7;
  --sage-500: #939D92;
  --sage-dim: rgba(147, 157, 146, 0.24); /* hairlines */

  /* Signature gradient — behind the mark & hero moments only */
  --gradient-signature: linear-gradient(135deg, #0A2230 0%, #0C8F3A 55%, #01DC36 100%);

  /* ---- Semantic aliases ---- */
  --bg-page: var(--ink-900);
  --surface-card: var(--ink-700);
  --surface-raised: var(--ink-600);
  --surface-inset: var(--ink-800);

  --text-primary: var(--white);
  --text-secondary: var(--sage-500);
  --text-muted: #6A726A;
  --text-accent: var(--arttec-green);
  --text-on-accent: #0B0C0A;

  --border-subtle: var(--sage-dim);
  --border-strong: var(--ink-500);
  --border-accent: var(--arttec-green);

  --focus-ring: var(--green-dim);
}

/* --------------------------------------------------------------------------
   Typography — Helvetica for headings, Futura for body, Garamond for highlights.
   Real Adobe Fonts families first, system/substitute fallbacks after.
   -------------------------------------------------------------------------- */
:root {
  /* Families */
  --font-heading: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "futura-pt", "Futura", "Century Gothic", sans-serif;
  --font-highlight: "eb-garamond", "EB Garamond", Garamond, serif;

  /* Weights */
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale — px sizes / line-heights from the guide */
  --fs-display: 52px;   --lh-display: 1.0;
  --fs-heading: 34px;   --lh-heading: 1.1;
  --fs-subheading: 20px;--lh-subheading: 1.3;
  --fs-body: 16px;      --lh-body: 1.6;
  --fs-small: 13px;     --lh-small: 1.5;
  --fs-highlight: 22px; --lh-highlight: 1.35;

  /* Tracking — headings run tight */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-label: 0.18em;  /* the (01) index / eyebrow all-caps look */
}

/* --------------------------------------------------------------------------
   Spacing, radius, shadow, motion
   -------------------------------------------------------------------------- */
:root {
  /* Spacing scale (4px base) */
  --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;

  /* Radii — rounded corners on cards & buttons */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows — restrained on dark; mostly used for lift on hover */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-raised: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 4px var(--green-dim);   /* focus / accent glow */

  /* Motion — micro-interactions (hover/focus) */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  /* Motion — GSAP engine mirror (scroll reveals). Keep in sync with
     motion.config.js: MOTION.easeCurve + MOTION.distance. Reveal durations live
     in motion.config.js (JS owns them); these are for CSS/Oxygen Interactions
     that should share the same signature feel. */
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-distance: 44px;
}