/* Vitals design tokens. The one source for the website and the rancher app.
 *
 * Edit this file, then run `python brand/sync.py`: it copies it to
 * site/css/tokens.css and src/vitals/rancher_static/tokens.css, and
 * tests/test_brand.py fails if either copy drifts. docs/brand.md says how
 * each token is meant to be used.
 *
 * Fonts (SIL OFL 1.1, self-hosted): Geist for everything, Sora Bold only in
 * the logo. Numbers use Geist's tabular figures; --font-mono is the system's. Each consumer declares its own
 * @font-face; the family names below are what they must be called.
 */

:root {
  /* ---------------------------------------------------------------- type */
  --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-logo: "Sora", "Geist", ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --w-regular: 400;
  --w-medium: 500;     /* headlines, buttons, names */
  --w-semi: 600;       /* big numbers only */

  /* Scale. Body text is never smaller than 15 px, and never grey-on-grey. */
  --t-sm: 0.9375rem;  /* 15  captions, secondary */
  --t-md: 1.0625rem;  /* 17  body */
  --t-lg: 1.25rem;    /* 20  lead */
  --t-xl: 1.5rem;     /* 24  card titles */
  --t-2xl: 2rem;      /* 32  app screen titles */
  --t-3xl: clamp(2.25rem, 4.8vw, 3.75rem);   /* section headlines */
  --t-4xl: clamp(3rem, 8vw, 6.5rem);         /* the hero */

  --lh-tight: 1.0;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --track-display: -0.045em;
  --track-head: -0.03em;

  /* ------------------------------------------------------------- palette */
  /* Cool, clean neutrals: the studio grey of the old site, lifted. */
  --paper:    #F6F7F9;   /* page ground */
  --paper-2:  #ECEEF2;   /* alternate band */
  --surface:  #FFFFFF;   /* cards */
  --ink:      #0B0C10;   /* headlines, primary text */
  --ink-2:    #2B303B;   /* body text        (12.3:1 on paper) */
  --ink-3:    #474D5A;   /* captions, labels (7.9:1 on paper) */
  --line:     rgba(11, 12, 16, 0.09);
  --line-2:   rgba(11, 12, 16, 0.16);

  --night:    #0B0C10;   /* dark ground */
  --night-2:  #15171D;   /* dark surface */
  --night-3:  #1F222A;   /* dark raised */
  --snow:     #F4F5F8;   /* text on dark */
  --snow-2:   #C3C8D3;   /* secondary on dark (11.7:1) */
  --snow-3:   #A4ABB8;   /* captions on dark (8.5:1) */
  --night-line: rgba(244, 245, 248, 0.10);

  /* Blue: the brand. Buttons, links, the active tab, "her normal". */
  --blue-900: #0E1466;
  --blue-700: #1F28B5;   /* hover, pressed */
  --blue:     #2732D6;   /* THE brand blue (7.8:1 on paper; white on it 8.4:1) */
  --blue-500: #4A55F0;
  --blue-300: #A9B0FF;   /* blue on dark (9.6:1 on night) */
  --blue-200: #CDD2FF;
  --blue-100: #E8EAFF;
  --sky:      #8EC5F4;   /* sky from the hero photo: glows and the pixel mosaic */
  --sky-100:  #E3F1FD;

  /* Status. Text-safe on paper and white (6.4:1 or better). Never decorative. */
  --alert:   #A82A1F;   /* check today */
  --watch:   #7A4E00;   /* worth a look */
  --ok:      #0F6337;   /* normal */
  --missing: #474D5A;   /* not seen */
  --alert-bg: #FCE9E6;
  --watch-bg: #FBF0D9;
  --ok-bg:    #E2F3E8;

  /* ------------------------------------------------------------- spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --gutter: 20px;
  --measure: 36rem;
  --page-max: 1240px;

  /* --------------------------------------------------------------- radii */
  --r-sm: 10px;    /* inputs, small buttons */
  --r-md: 14px;    /* cards in the app */
  --r-lg: 22px;    /* panels, media */
  --r-xl: 32px;
  --r-pill: 999px;

  /* ------------------------------------------------------------- shadows */
  --shadow-1: 0 1px 2px rgba(11, 12, 16, 0.06);
  --shadow-2: 0 1px 2px rgba(11, 12, 16, 0.05), 0 8px 24px -8px rgba(11, 12, 16, 0.12);
  --shadow-3: 0 2px 6px rgba(11, 12, 16, 0.05), 0 30px 60px -20px rgba(11, 12, 16, 0.25);
  --shadow-blue: 0 1px 2px rgba(14, 20, 102, 0.3), 0 10px 24px -10px rgba(39, 50, 214, 0.7);
  --ring: 0 0 0 4px rgba(39, 50, 214, 0.22);

  /* -------------------------------------------------------------- motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 700ms;

  /* ----------------------------------------------------------- textures */
  /* Soft colour light, CSS only. Layer over --paper. */
  --glow-hero: radial-gradient(70% 60% at 50% 0%, rgba(142, 197, 244, 0.35), transparent 70%),
               radial-gradient(50% 50% at 90% 30%, rgba(74, 85, 240, 0.12), transparent 70%);
  --glow-blue: radial-gradient(closest-side, rgba(39, 50, 214, 0.35), transparent);
  /* The pixel mosaic (drawn by a canvas, see site/js/pixels.js and
     docs/brand.md): a photo or a glow breaking into square pixels at its
     edge. These are the colours a glow mosaic is made from. */
  --pixel-1: #2732D6;
  --pixel-2: #4A55F0;
  --pixel-3: #8EC5F4;
  --pixel-4: #CDD2FF;
  --pixel-size: 14px;
}