/* =========================================================================
   AVANT-GARDE — colors_and_type.css
   Single source of truth for tokens. Dark-mode liquid glass edition.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Garet";
  src: url("fonts/Garet-Book.woff2") format("woff2"),
       url("fonts/Garet-Book.woff")  format("woff"),
       url("fonts/Garet-Book.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garet";
  src: url("fonts/Garet-Heavy.woff2") format("woff2"),
       url("fonts/Garet-Heavy.woff")  format("woff"),
       url("fonts/Garet-Heavy.ttf")   format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Tokens — Color
   ------------------------------------------------------------------------- */
:root {
  /* Core brand */
  --ag-ink:      #07070A;
  --ag-paper:    #F2F2F7;
  --ag-mint:     #6FE2D2;
  --ag-magenta:  #E42363;

  /* Dark surface scale */
  --ag-dark-0:   #07070A;
  --ag-dark-1:   #0C0C12;
  --ag-dark-2:   #111118;
  --ag-dark-3:   #181820;
  --ag-dark-4:   #22222E;
  --ag-dark-border: rgba(255,255,255,0.07);

  /* Glass */
  --glass-bg:          rgba(255,255,255,0.035);
  --glass-bg-hover:    rgba(255,255,255,0.065);
  --glass-border:      rgba(255,255,255,0.08);
  --glass-border-str:  rgba(255,255,255,0.14);

  /* Mint tones */
  --ag-mint-tint:  rgba(111,226,210,0.15);
  --ag-mint-deep:  #3EC4B4;

  /* Magenta tones */
  --ag-magenta-tint:  rgba(228,35,99,0.15);
  --ag-magenta-deep:  #B01550;

  /* Semantic — foreground */
  --fg-1: #F2F2F7;
  --fg-2: rgba(242,242,247,0.55);
  --fg-3: rgba(242,242,247,0.32);
  --fg-on-dark-1: #F2F2F7;
  --fg-on-dark-2: rgba(242,242,247,0.5);

  /* Semantic — surface */
  --bg-1: var(--ag-dark-0);
  --bg-2: var(--ag-dark-1);
  --bg-card: var(--glass-bg);
  --bg-inverse-1: var(--ag-paper);
  --bg-inverse-2: rgba(242,242,247,0.06);

  --line-1: var(--ag-dark-border);
  --line-2: rgba(255,255,255,0.05);
  --line-on-dark: rgba(255,255,255,0.07);

  --accent-cool: var(--ag-mint);
  --accent-hot:  var(--ag-magenta);

  /* Glows */
  --glow-mint:    0 0 32px rgba(111,226,210,0.2);
  --glow-magenta: 0 0 32px rgba(228,35,99,0.25);

  /* -----------------------------------------------------------------------
     Tokens — Type
     ----------------------------------------------------------------------- */
  --font-display: "Garet", "Arial Black", system-ui, sans-serif;
  --font-body:    "Garet", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fw-book:  400;
  --fw-heavy: 800;

  /* Scale — major-third (1.250) anchored at 16px */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  48px;
  --t-4xl:  64px;
  --t-5xl:  88px;
  --t-6xl:  120px;

  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tr-tight: -0.04em;
  --tr-snug:  -0.02em;
  --tr-base:  0em;
  --tr-loose: 0.02em;
  --tr-wide:  0.16em;

  /* -----------------------------------------------------------------------
     Tokens — Spacing + radius + elevation
     ----------------------------------------------------------------------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Rounded glass corners */
  --r-0:   0;
  --r-1:   4px;
  --r-2:   8px;
  --r-3:   12px;
  --r-4:   16px;
  --r-5:   20px;
  --r-pill:999px;

  /* Glass borders */
  --stroke-1: 1px solid var(--glass-border);
  --stroke-2: 1px solid var(--glass-border-str);

  /* Soft elevation */
  --shadow-sm:  0 4px 16px rgba(0,0,0,0.3);
  --shadow-md:  0 12px 40px rgba(0,0,0,0.45);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.55);
  --shadow-glow-mint:    0 0 32px rgba(111,226,210,0.18), 0 0 0 1px rgba(111,226,210,0.15);
  --shadow-glow-magenta: 0 0 32px rgba(228,35,99,0.22),  0 0 0 1px rgba(228,35,99,0.18);

  /* Motion */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --d-quick: 150ms;
  --d-base:  250ms;
  --d-slow:  400ms;

  /* Legacy aliases kept for compatibility */
  --easing-snap: var(--ease-spring);
  --easing-soft: var(--ease-out);
  --ag-ink-95:  var(--ag-dark-1);
  --ag-ink-85:  var(--ag-dark-2);
  --ag-ink-70:  var(--ag-dark-3);
  --ag-ink-50:  rgba(242,242,247,0.5);
  --ag-ink-30:  rgba(242,242,247,0.3);
  --ag-ink-15:  rgba(255,255,255,0.06);
  --ag-ink-05:  rgba(255,255,255,0.03);
}