/* Paidwell brand tokens. Concept: "One sheet, folded" (studio/boards/board-3.html).
   Every page (public, /app/, /admin/, /login/, /i/) reads these variables.
   The font import sits here so the back-office pages, which only load tokens.css + app.css, get it too. */
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;800;900&display=swap");

:root {
  /* Stage and paper */
  --yellow: #F3C22F;        /* the page and the stage. Never a button. */
  --floor: #DCA816;         /* cast shadow of paper on the yellow stage */
  --paper: #FFFDF6;         /* sheets, working screens */
  --white: #FFFFFF;         /* a sheet lying on paper (tiles, tables) */
  --ink: #141414;           /* all text, rules, the fold's dark side */
  --ink-soft: #3A3833;      /* secondary text. 11.6:1 on paper, 7.1:1 on yellow */

  /* The three fold tones (illustrations, folded corners, quiet fills) */
  --fold-1: #EDE6D0;
  --fold-2: #D9D0B4;
  --fold-3: #BFB494;

  /* Action: red, main action only, always with white text (5.6:1) */
  --action: #C42E16;
  --action-press: #A52512;
  --action-ink: #FFFFFF;

  /* Messages. Errors use a deeper red for text (7.4:1 on paper), never on yellow. Success is ink with a tick. */
  --bad: #9E2410;
  --good: #141414;

  /* Names the starter back office reads */
  --page: var(--paper);
  --surface: var(--white);
  --line: #141414;
  --line-soft: #D9D0B4;

  /* Shape: paper has square corners. Depth is a hard floor shadow, never a blur. */
  --radius-s: 0;
  --radius-m: 0;
  --rule: 1.5px;
  --rule-strong: 2px;
  --corner: 22px;           /* folded corner on tiles and sheets */
  --corner-s: 12px;

  /* Type: Schibsted Grotesk only. 900/800 headlines and amounts, 500/400 reading. */
  --font-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --w-read: 400;
  --w-label: 500;
  --w-strong: 800;
  --w-display: 900;

  /* Type scale (3x+ jump from body to display) */
  --t-xs: 0.8125rem;   /* 13 */
  --t-s: 0.9375rem;    /* 15 */
  --t-m: 1.0625rem;    /* 17 body in the app */
  --t-l: 1.25rem;      /* 20 lede */
  --t-xl: 1.6875rem;   /* 27 section title */
  --t-2xl: clamp(2rem, 1.4rem + 2.6vw, 2.875rem);     /* 32-46 page title */
  --t-3xl: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);    /* 44-88 public H1 */
  --t-amount: clamp(2.25rem, 1.7rem + 2.2vw, 3.625rem); /* 36-58 tile amounts */

  /* Space and widths */
  --gutter: clamp(20px, 4.4vw, 64px);
  --w-page: 1312px;
  --w-text: 680px;
  --w-form: 560px;

  /* Motion: the fold is the only transition. */
  --fold-time: 450ms;
  --fold-ease: cubic-bezier(.2, .7, .2, 1);
}