/* ============================================================
   Editorial Future v2 — LAYER 1: TOKENS
   Source of truth: DESIGN.md. Do not put component rules here.
   ============================================================ */
:root {
  /* Color */
  --ef-canvas:      #0C0D10;
  --ef-surface:     #13151A;
  --ef-line:        #23262E;
  --ef-fg:          #E9EAEC;
  --ef-fg-2:        #9A9FA8;
  --ef-fg-3:        #757B86;   /* AA muted, 4.57:1 on canvas */
  --ef-fg-4:        #5C616B;   /* decorative only — not for text */
  --ef-accent:      #2DD4BF;
  --ef-accent-rgb:  45, 212, 191;
  --ef-accent-dim:  rgba(var(--ef-accent-rgb), .12);
  --ef-accent-soft: rgba(var(--ef-accent-rgb), .05);

  /* Effects (v2 additions) */
  --ef-glow:        0 0 18px rgba(var(--ef-accent-rgb), .35);
  --ef-glow-strong: 0 0 28px rgba(var(--ef-accent-rgb), .70);
  --ef-cut:         0px;    /* squared off — was 14px cut corner (cards/steps) */
  --ef-cut-sm:      0px;    /* squared off — was 10px cut corner (buttons) */
  --ef-clip:        polygon(var(--ef-cut) 0, 100% 0, 100% calc(100% - var(--ef-cut)), calc(100% - var(--ef-cut)) 100%, 0 100%, 0 var(--ef-cut));
  --ef-clip-sm:     polygon(var(--ef-cut-sm) 0, 100% 0, 100% calc(100% - var(--ef-cut-sm)), calc(100% - var(--ef-cut-sm)) 100%, 0 100%, 0 var(--ef-cut-sm));
  --ef-grid-size:   48px;
  --ef-radius:      8px;    /* buttons + form fields */
  --ef-img-radius:  4px;    /* all images */
  --ef-card-radius: 4px;    /* cards + tiles + panels */

  /* Type */
  --ef-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ef-font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --ef-display: clamp(44px, 6.5vw, 84px);
  --ef-h1:      clamp(32px, 4.5vw, 52px);
  --ef-h2:      34px;
  --ef-h3:      24px;
  --ef-h4:      18px;
  --ef-stmt:    clamp(24px, 3vw, 34px);
  --ef-body-lg: 18px;
  --ef-body:    16px;
  --ef-body-sm: 14.5px;
  --ef-label:   12px;
  --ef-label-sm: 11px;
  --ef-track-label: 2px;

  /* Spacing */
  --ef-sp-xs: 8px;  --ef-sp-sm: 16px; --ef-sp-md: 24px;
  --ef-sp-lg: 40px; --ef-sp-xl: 88px; --ef-sp-xxl: 112px;
  --ef-pad:   40px;                 /* frame gutter */

  /* Layout */
  --ef-frame-max: 1240px;
  --ef-bp-mobile: 920px;            /* reference only — media queries can't read vars */

  /* Motion */
  --ef-ease:      cubic-bezier(.2,.7,.2,1);
  --ef-t-fast:    .2s;
  --ef-t-reveal:  .7s;
  --ef-t-draw:    .8s;
  --ef-marquee:   36s;
}
@media (max-width: 920px) { :root { --ef-pad: 24px; } }