/* =========================================================================
   Dondon Studio — Design tokens
   Ported from the CONDUIT / VisualTech theme the studio is built around.
   Everything visual references these variables so the whole site can be
   re-skinned from this one file.
   ========================================================================= */

/* ─── Haffer font faces (vendored locally — no CDN, works offline) ──────── */
@font-face {
  font-family: 'Haffer';
  src: url('../fonts/Haffer-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haffer';
  src: url('../fonts/Haffer-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haffer';
  src: url('../fonts/Haffer-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haffer';
  src: url('../fonts/Haffer-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette */
  --color-bg:               #0a0a0a;
  --color-surface:          #111111;
  --color-surface-elevated: #181818;
  --color-white:            #f5f4f0;
  --color-accent:           #2563eb;
  --color-accent-lt:        #3b82f6;
  --color-muted:            rgba(245, 244, 240, 0.55);
  --color-faint:            rgba(245, 244, 240, 0.35);
  --color-border:           rgba(245, 244, 240, 0.08);
  --color-border-hover:     rgba(245, 244, 240, 0.16);

  /* Semantic accents */
  --color-pro:      #f5a623;   /* "PRO" gold */
  --color-free:     #10b981;   /* "FREE" green */
  --color-danger:   #ee5253;
  --color-success:  #10b981;

  /* Shape & motion */
  --radius: 0px;            /* CONDUIT = sharp corners */
  --radius-card: 0px;
  --ease-tab: cubic-bezier(0.76, 0, 0.24, 1);

  /* Typography */
  --font-body: 'Haffer', 'Inter', system-ui, -apple-system, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Layout */
  --container: 1100px;
  --container-wide: 1320px;
  --nav-h: 64px;
}