/* ============================================================
   DOORBUSTER: design tokens (Black Friday, on the Frost system)

   The Frost system from the Christmas tracker v2: the same frame,
   rail, big rounded cards, pill controls, capsules and light-weight
   figures. Re-inked for Black Friday: shop-window black for the
   dark blocks, price-sticker yellow as the accent, concrete grey
   around the app.

   COLOUR RULES (unchanged from Frost)
   - --red only ever means money that is over: over budget, or paid
     over your own max price. It is never decoration, so there is no
     red "SALE" anywhere in this product.
   - --gold-deep is "watching" (still to buy) in every bar; --gold
     (the sticker yellow) is a fill and the accent card.
   - Text on --card or --bg uses --ink or --ink-2 only.
   ============================================================ */

@font-face {
  font-family: 'Geist';
  src: url('../../public/fonts/geist-latin.woff2') format('woff2-variations'),
       url('../../public/fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../../public/fonts/geist-latin-ext.woff2') format('woff2-variations'),
       url('../../public/fonts/geist-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* surfaces */
  --frame: #BDBBB4;      /* concrete grey around the app on big screens */
  --bg: #F4F3EF;         /* the app itself: receipt paper */
  --card: #EAE8E2;       /* blocks */
  --raised: #FFFFFF;     /* pills, icon tiles, inputs */
  --sunk: #F4F3EF;       /* a pill sitting on a card */
  --line: #DCDAD3;       /* hairlines and bar tracks */
  --dash: #8D8A83;       /* empty capsules, dashed outlines */

  /* ink */
  --ink: #141413;
  --ink-2: #5F5C56;
  --on-dark: #FFFFFF;
  --on-dark-2: #BFBCB5;

  /* the black block (rail, "needs a look", primary buttons).
     Named pine in the engine so components stay shared. */
  --pine: #141413;
  --pine-2: #34332F;     /* active item on black */
  --pine-line: #2C2B28;

  /* Black Friday */
  --red: #C42830;        /* over: the only meaning red has here */
  --red-ink: #A51F27;    /* over text on light surfaces */
  --red-soft: #FCDCDD;
  --red-dash: #F2A7AA;
  --gold: #FFD02E;       /* the price sticker */
  --gold-deep: #E0A800;  /* "watching" in bars */
  --on-gold: #141413;
  --gold-ink: #6E5300;   /* secondary text on the sticker card */
  --gold-dash: #8C6A00;  /* empty capsules on the sticker card */

  /* the primary control: black by day, paper by night */
  --primary: #141413;
  --on-primary: #FFFFFF;
  --past: #D8D6CF;
  --warn-bg: #FBE6E7;
  --warn-ink: #6E1720;

  /* type */
  --font: 'Geist', ui-sans-serif, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* shape */
  --r-shell: 44px;
  --r-card: 32px;
  --r-card-sm: 26px;
  --r-tile: 16px;
  --tap: 44px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 160ms;
  --mid: 260ms;

  color-scheme: light;
}

/* Late-night shopping: the same palette with the lights off. */
:root[data-theme='dark'] {
  --frame: #070707;
  --bg: #121211;
  --card: #1C1B19;
  --raised: #282724;
  --sunk: #121211;
  --line: #302F2B;
  --dash: #77746D;

  --ink: #F2F1EC;
  --ink-2: #ADAAA2;
  --on-dark: #FFFFFF;
  --on-dark-2: #BFBCB5;

  --pine: #0A0A09;
  --pine-2: #2E2D29;
  --pine-line: #262522;

  --red: #C62C34;
  --red-ink: #FF9CA0;
  --red-soft: #FFE1E2;
  --red-dash: #F6B1B4;
  --gold: #FFD02E;
  --gold-deep: #F0BC1A;
  --on-gold: #141413;
  --gold-ink: #6E5300;
  --gold-dash: #8C6A00;

  --primary: #F2F1EC;
  --on-primary: #141413;
  --past: #34332F;
  --warn-bg: #3A1A1D;
  --warn-ink: #FFD6D8;

  color-scheme: dark;
}