/* Operlivo design tokens. The only file in assets/site/ that holds colour values (see DESIGN.md). */
:root {
  color-scheme: light;

  --ink: #202b36;
  --ink-800: #2d3a46;
  --ink-muted: #56616b;
  --ink-subtle: #6b757e;
  --on-ink: #ffffff;
  --accent: #bc4a25;
  --accent-hover: #a33f1f;
  --accent-soft: #fbeee7;
  --ok: #5f7d64;
  --ok-soft: #edf2ed;

  /* Contrast hues: one per area of work. Text colour, soft surface, and a light variant for ink.
     Measured: text on soft 5.3–6.2, text on white 6.1–7.2, light variant on ink 7.1–8.9. */
  --orange: #a33f1f;
  --orange-soft: #fbeee7;
  --orange-on-ink: #f2a37e;
  --blue: #2b5a8a;
  --blue-soft: #e8f0f8;
  --blue-on-ink: #9cc3ec;
  --green: #2f6e4c;
  --green-soft: #e5f2ea;
  --green-on-ink: #8fd1a8;
  --ochre: #87580a;
  --ochre-soft: #fbf0d9;
  --ochre-on-ink: #f0c66b;
  --plum: #6b4aa0;
  --plum-soft: #f1ecf8;
  --plum-on-ink: #c3adeb;
  --muted-on-ink: #a9b2bb;
  --panel-on-ink: rgba(255, 255, 255, .06);
  --shadow-sim: 0 1px 2px rgba(32, 43, 54, .05), 0 12px 32px -12px rgba(32, 43, 54, .16);

  /* Ink that has not arrived yet: the statement's words before they scroll in (home.css), never a resting state. */
  --ink-ghost: rgba(32, 43, 54, .16);
  /* Gloss on the platform blocks and the statement's logo tiles (home.css): highlight, shade and drop shadows. */
  --gloss-hi: rgba(255, 255, 255, .5);
  --gloss-lo: rgba(10, 14, 18, .3);
  --shadow-block: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 4px rgba(10, 14, 18, .18), 0 1px 1px rgba(0, 0, 0, .3), 0 16px 28px -12px rgba(0, 0, 0, .75);
  --shadow-logo-tile: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(32, 43, 54, .08), 0 14px 26px -12px rgba(32, 43, 54, .36);
  --shadow-slot: inset 0 2px 5px rgba(32, 43, 54, .14), inset 0 0 0 1px rgba(32, 43, 54, .06);
  --tile-on-ink-hover: rgba(255, 255, 255, .1);
  /* The hero's stack of prepared work (home.css): a lifted card, and a warm light that follows the pointer. */
  --shadow-stack: 0 1px 2px rgba(32, 43, 54, .05), 0 8px 20px -12px rgba(32, 43, 54, .14), 0 22px 40px -28px rgba(32, 43, 54, .2);
  --task-glare: rgba(247, 217, 200, .2);
  /* The desk under the hero (hero-field.js): faint dots, which warm up to the accent where the pointer stirs them. */
  --field-dot: rgba(32, 43, 54, .13);
  --field-lit: var(--accent);
  /* The glass folder that holds the stack: its painted back (colours in order through the art, read by
     hero-field.js), the frosted front, the rims and the shadow on the desk. */
  --folder-art: #f7e3d6, #efc3aa, #e2a084, #f3d6c6;
  --folder-back: linear-gradient(160deg, #f8e3d6 0%, #eeb69a 55%, #d9805c 100%);
  --folder-glass: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .7) 34%, rgba(253, 251, 249, .93) 100%);
  --folder-gloss: linear-gradient(180deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 18px);
  --folder-sheen: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 24%);
  --folder-spec: rgba(255, 255, 255, .55);
  --folder-rim: rgba(255, 255, 255, .85);
  --folder-rim-back: rgba(255, 255, 255, .5);
  --folder-shadow: rgba(120, 58, 30, .22);
  /* The black pointer that clicks through the product examples (sim-cursor.js). */
  --cursor-shadow: rgba(32, 43, 54, .35);

  --canvas: #ffffff;
  --paper: #faf9f6;
  --panel: rgba(243, 239, 233, .56);
  --panel-solid: #f8f6f2;
  --hairline: #e6e3dc;
  --line: var(--hairline);
  --line-soft: rgba(32, 43, 54, .06);
  --line-ink: rgba(32, 43, 54, .14);
  --line-accent: rgba(188, 74, 37, .35);
  --line-on-ink: rgba(255, 255, 255, .16);
  --wash: rgba(32, 43, 54, .05);
  --tint-on-ink: rgba(255, 255, 255, .08);
  --announce-line: rgba(247, 217, 200, .45);
  --scrim: rgba(20, 26, 32, .72);
  --scrim-soft: rgba(32, 43, 54, .18);

  --grad-1: #f7d9c8;
  --grad-2: #f3e6dc;
  --grad-3: #faf9f6;
  --grad-top: linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 46%, var(--grad-3) 82%, var(--canvas) 100%);
  --grad-bottom: linear-gradient(180deg, var(--canvas) 0%, var(--grad-3) 24%, var(--grad-2) 62%, var(--grad-1) 100%);

  --glass: rgba(255, 255, 255, .48);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-nav: rgba(255, 255, 255, .86);
  --glass-solid: rgba(255, 255, 255, .92);
  --glass-border: rgba(255, 255, 255, .8);
  --glass-ink: rgba(32, 43, 54, .84);
  --on-glass-ink: rgba(255, 255, 255, .72);
  --glass-footer: rgba(255, 255, 255, .64);
  --wordmark-fill: rgba(255, 255, 255, .7);

  --shadow-nav: 0 1px 2px rgba(32, 43, 54, .04), 0 10px 30px -14px rgba(32, 43, 54, .18);
  --shadow-menu: 0 2px 4px rgba(32, 43, 54, .04), 0 24px 60px -24px rgba(32, 43, 54, .32);
  --shadow-card-hover: 0 6px 18px rgba(32, 43, 54, .08);
  --shadow-frame: 0 24px 60px rgba(32, 43, 54, .08);
  --shadow-dock: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px -10px rgba(32, 43, 54, .4), 0 30px 60px -28px rgba(32, 43, 54, .5);
  --shadow-tab: 0 1px 2px rgba(32, 43, 54, .06), 0 4px 12px rgba(32, 43, 54, .06);
  /* A solid accent ring with a light gap: 5.1:1 on white and 3.8:1 on the hero gradient (3:1 is the bar for focus). */
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);

  --font: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --r-pill: 999px;
  --r-button: 32px;
  --r-nav: 28px;
  --r-card: 20px;
  --r-tile: 14px;
  --r-small: 10px;

  --w-narrow: 720px;
  --w-default: 1080px;
  --w-wide: 1280px;
  --gutter: 32px;
  --section-y: 72px;

  --fast: .15s;
  --base: .2s;
  --enter: cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 960px) { :root { --section-y: 56px; } }
@media (max-width: 767px) { :root { --gutter: 24px; --section-y: 48px; } }
@media (max-width: 479px) { :root { --gutter: 16px; } }