/* The approved colours and tokens. Import this file; do not copy values out of it.
   Source: nextory company-context, company/way-of-working/brand-guidelines.md */

:root{
  /* Colours. Pink and purple are the only brand colours; green and yellow are
     accents — at most one per piece, never together, never dominant. Text on
     pink or purple: always white. Text on light backgrounds: gray-dark. */
  --color-pink: #C4005E;
  --color-purple: #673888;
  --color-green: #499500;
  --color-yellow: #FECD40;
  --color-sand-light: #F9F5F2;
  --color-sand-mid: #EEEBE8;
  --color-gray-dark: #1A1110;
  --color-white: #FFFFFF;
  --color-black: #000000;

  --gradient-primary: linear-gradient(135deg, #C4005E, #673888);
  --gradient-wash: linear-gradient(180deg, #F9F5F2, #FFFFFF);

  /* Type. One family; hierarchy comes from weight, never a second face.
     The guidelines state sizes in pt (they cover decks and documents too);
     on the web they map at 16pt = 1rem. */
  --font-family: "Nextory Sans", "Google Sans", Roboto, Arial, sans-serif;
  --font-size-display: 3rem;      /* 48pt; documented range 48–64pt (3–4rem) */
  --font-size-h1: 2rem;           /* 32pt; 32–40pt (2–2.5rem) */
  --font-size-h2: 1.5rem;         /* 24pt; 24–28pt (1.5–1.75rem) */
  --font-size-h3: 1.125rem;       /* 18pt; 18–20pt (1.125–1.25rem) */
  --font-size-body: 1rem;         /* 16pt; 14–16pt (0.875–1rem) */
  --font-size-caption: 0.75rem;   /* 12pt; 11–12pt (0.6875–0.75rem) */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --line-height-display: 1.2;  /* 1.1–1.2 */
  --line-height-body: 1.5;     /* 1.4–1.5 */

  /* Layout. 8pt grid; content padding 40–48px from the edge. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --content-padding: 48px;

  --radius-tag: 4px;
  --radius-card: 12px;
  --radius-pill: 24px;        /* buttons */
  --radius-full-bleed: 0px;   /* full-bleed blocks are square */

  --shadow-subtle: 0 2px 8px rgba(0,0,0,0.1);  /* the only shadow */
}