/* ==========================================================================
   Apoxy Design System — Tokens
   The single source of truth for color, type, spacing, radius, shadow.
   Import this file at the top of any artifact.
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Inter is bundled locally via colors_and_type.css (see fonts/ directory).
   TWK Everett is the licensed brand display face — drop the woff2 files into
   assets/fonts/ to activate; Inter Display is the documented fallback.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'TWK Everett';
  src: url('/assets/fonts/TWKEverett-Regular.woff2') format('woff2'),
       url('/assets/fonts/TWKEverett-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TWK Everett';
  src: url('/assets/fonts/TWKEverett-Medium.woff2') format('woff2'),
       url('/assets/fonts/TWKEverett-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Color: core palette ---
     Apoxy is monochromatic by design. Off-black on warm-white,
     with a single brand blue accent reserved for key CTAs and links. */

  --apx-ink:          #1E1D1C;   /* near-black, all primary text + logos */
  --apx-ink-2:        #252122;   /* line-illustration stroke */
  --apx-graphite:     #4A4847;   /* body text, secondary */
  --apx-slate:        #6B6967;   /* muted text, captions */
  --apx-stone:        #ABABAB;   /* disabled, hairlines on dark */
  --apx-fog:          #D9D7D3;   /* borders */
  --apx-mist:         #EDECE8;   /* subtle dividers, inset surfaces */
  --apx-paper:        #F5F3EE;   /* warm canvas, the signature surface */
  --apx-bone:         #FAF8F4;   /* off-white card surface */
  --apx-white:        #FFFFFF;

  /* --- Color: accents ---
     Used sparingly. Blue is the only saturated hue in the system. */
  --apx-blue:         #3D91DC;   /* primary action, links on hover */
  --apx-blue-deep:    #2E72B0;   /* pressed / heading accents */
  --apx-blue-tint:    #E5F0FA;   /* informational backgrounds */

  --apx-violet:       #AA94EB;   /* media scrubber accent only */
  --apx-coral:        #EA6A4E;   /* destructive, alerts */
  --apx-coral-tint:   #FBE8E2;
  --apx-leaf:         #4F8A4A;   /* success */
  --apx-leaf-tint:    #E2EEDF;
  --apx-amber:        #C28A2A;   /* warning */
  --apx-amber-tint:   #F7ECCE;

  /* --- Semantic surfaces --- */
  --surface-canvas:   var(--apx-paper);
  --surface-card:     var(--apx-white);
  --surface-inset:    var(--apx-mist);
  --surface-invert:   var(--apx-ink);

  /* --- Semantic text --- */
  --text-primary:     var(--apx-ink);
  --text-secondary:   var(--apx-graphite);
  --text-muted:       var(--apx-slate);
  --text-disabled:    var(--apx-stone);
  --text-on-invert:   var(--apx-bone);
  --text-link:        var(--apx-ink);
  --text-link-hover:  var(--apx-blue);

  /* --- Semantic borders --- */
  --border-strong:    var(--apx-ink);
  --border-default:   var(--apx-fog);
  --border-subtle:    var(--apx-mist);

  /* --- Type --- */
  --font-display:     'TWK Everett', 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:        'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body-sm:     'Inter Small', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  /* Display scale — TWK Everett, used for hero & section headers.
     The brand voice is restrained: tight tracking, no italics. */
  --t-display-xl:     clamp(56px, 8vw, 120px);   /* hero */
  --t-display-lg:     clamp(44px, 6vw, 80px);    /* section openers */
  --t-display-md:     clamp(34px, 4vw, 56px);
  --t-display-sm:     clamp(28px, 3vw, 40px);

  /* UI scale — Inter, used everywhere else */
  --t-h1:             40px;
  --t-h2:             32px;
  --t-h3:             24px;
  --t-h4:             20px;
  --t-h5:             16px;
  --t-body-lg:        18px;
  --t-body:           16px;
  --t-body-sm:        14px;
  --t-caption:        13px;
  --t-micro:          12px;
  --t-overline:       11px;

  --lh-display:       0.95;
  --lh-tight:         1.15;
  --lh-snug:          1.35;
  --lh-body:          1.55;
  --lh-loose:         1.7;

  --tr-display:       -0.02em;
  --tr-tight:         -0.01em;
  --tr-normal:        0;
  --tr-wide:          0.04em;
  --tr-overline:      0.12em;

  /* --- Spacing (4px base) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* --- Radius ---
     Apoxy is square. Every surface — buttons, inputs, cards, modals,
     code blocks, badges, avatars, focus rings — has a 0 px corner.
     The only exception is the moving knob inside a toggle switch,
     which is a mechanical control, not a surface. */
  --r-none: 0;
  --r-xs:   0;
  --r-sm:   0;
  --r-md:   0;
  --r-lg:   0;
  --r-xl:   0;
  --r-2xl:  0;
  --r-pill: 0;     /* deprecated — kept at 0 for back-compat */
  --r-knob: 50%;   /* toggle-switch knob only */

  /* --- Shadow ---
     Subtle, never blown out. The line-art carries weight; shadows just hint. */
  --sh-none: none;
  --sh-1: 0 1px 0 rgba(30, 29, 28, 0.04), 0 1px 2px rgba(30, 29, 28, 0.06);
  --sh-2: 0 2px 4px rgba(30, 29, 28, 0.05), 0 4px 12px rgba(30, 29, 28, 0.06);
  --sh-3: 0 4px 8px rgba(30, 29, 28, 0.06), 0 12px 32px rgba(30, 29, 28, 0.08);
  --sh-4: 0 8px 16px rgba(30, 29, 28, 0.08), 0 24px 64px rgba(30, 29, 28, 0.12);
  --sh-focus: 0 0 0 3px rgba(61, 145, 220, 0.35);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast:     120ms;
  --d-base:     200ms;
  --d-slow:     320ms;

  /* --- Layout --- */
  --container:  1240px;
  --gutter:     32px;
}

/* ----- Base styles (apply once per artifact) ----- */
.apx-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}