/* Foreman phone app: design tokens.
   Every color, size and font the app uses is named here, so a native port
   (React Native / SwiftUI) can copy this one file as its theme.
   Look: Perplexity's Computer screen, in Foreman colors. A near-black navy
   backdrop with a slow blue aurora rising from the bottom, neutral frosted
   glass, a turning light rim on the message box. One color family (blue);
   gold only for money. No rainbow, no shimmer. */
:root {
  color-scheme: dark;

  /* Backdrop */
  --bg: #05070d;
  --bg-top: #070910;
  --bg-mid: #080b14;
  --grain-opacity: .05;

  /* Aurora: all blue */
  --au-blue: 45, 107, 255;      /* rgb triplets, used with alpha */
  --au-deep: 24, 58, 205;
  --au-ice: 124, 192, 255;
  --au-gold: 255, 196, 77;
  --sweep: rgba(255, 255, 255, .55), rgba(124, 192, 255, .45), rgba(45, 107, 255, .3),
           rgba(255, 255, 255, .06), rgba(124, 192, 255, .3), rgba(255, 255, 255, .55);

  /* Surfaces (Kyle 2026-10-03: the see-through white glass read as flat gray; a
     professional app needs solid, navy-tinted panels with a crisp edge). */
  --glass-fill: rgba(20, 31, 52, .78);
  --glass-fill-hi: rgba(30, 45, 74, .86);
  --glass-base: rgba(10, 12, 20, .5);
  --glass-sunk: rgba(0, 0, 0, .3);
  --glass-edge: rgba(132, 168, 232, .2);
  --glass-edge-hi: rgba(255, 255, 255, .36);
  --glass-blur: 26px;
  --glass-strong: rgba(12, 14, 24, .9);
  --scrim: rgba(2, 4, 10, .5);

  /* Ink */
  --ink: #fff;
  --ink-1: #eef1f8;
  /* Solid, cool inks (not white-at-low-opacity, which muddies to gray). */
  --ink-2: #c5cfdf;
  --ink-3: #8d9cb4;
  --ink-4: #5d6d88;
  --line: rgba(132, 168, 232, .14);
  --surface-2: rgba(132, 168, 232, .08);     /* a row or chip inside a panel */
  /* "Ink" text on glass: solid white, bright secondary, and a hairline shadow
     under each letter so it stays razor sharp over blurred backgrounds. */
  --ink-meta: #b6c2d6;
  --ink-shadow: 0 1px 1px rgba(0, 0, 0, .5), 0 0 .5px rgba(255, 255, 255, .4);

  /* Brand */
  --blue: #2d6bff;
  --blue-hi: #7cc0ff;
  --blue-ice: #d9f1ff;
  --blue-deep: #1440c8;
  --gold: #ffc44d;
  --green: #22c55e;           /* credits: adding money */
  --green-hi: #62f197;
  --green-ink: #03250f;
  --danger: #ff6b78;

  /* Type */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-s: 12.5px;
  --text-m: 14px;
  --text-l: 15px;
  --text-input: 16px;   /* anything you type: 16px stops iOS from zooming */
  --text-xl: 17px;

  /* Shape */
  --ctl: 38px;          /* header circles */
  --ctl-s: 34px;        /* composer buttons */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 20px;
  --r-xl: 24px;
  --gutter: 16px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 150ms;
  --slow: 300ms;

  /* Safe areas (notch, home bar) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Lets the light edges rotate smoothly (Safari 16.4+, Chrome). Without it
   they simply hold still. */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }