/*
 * ARK design tokens. The single source of truth for colour, type, space, shape and motion.
 * BRAND.md explains each one. Product UI, docs and marketing import this file or copy its
 * values; they do not invent new ones.
 */

:root {
  /* Colour: the six brand colours */
  --ark-canvas: #fafaf7;       /* paper. The default background everywhere */
  --ark-ink: #0f1115;          /* text, the logo, primary buttons */
  --ark-blue: #335eb7;         /* the one accent. oklch(0.50 0.15 263). Use sparingly */
  --ark-mist: #f1f3f6;         /* quiet surfaces: wells, code, inactive tabs */
  --ark-slate: #9aa0a6;        /* rules, disabled, decorative marks. Not for text */
  --ark-graphite: #6b7280;     /* secondary text, labels */

  /* Colour: derived. Do not add others without updating BRAND.md */
  --ark-surface: #ffffff;                 /* raised surfaces: windows, popovers */
  --ark-quiet: #878d96;                   /* second line of a two-tone headline. 3.2:1, 24px and up only */
  --ark-ink-hover: #23262d;               /* ink button on hover */
  --ark-blue-press: #2a4e99;              /* blue on hover or press */
  --ark-blue-wash: #ecf1fa;               /* selected row, active node fill */
  --ark-line: rgb(15 17 21 / 0.08);       /* hairlines, grid */
  --ark-line-strong: rgb(15 17 21 / 0.14);
  --ark-focus: rgb(51 94 183 / 0.35);

  /* Colour: status, product UI only. Muted to sit beside the brand colours */
  --ark-ok: #45845d;
  --ark-wait: #c69449;
  --ark-error: #b54b41;
  --ark-ok-wash: #edf4ef;

  /* Type */
  --ark-font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --ark-font-text: "Inter", ui-sans-serif, system-ui, sans-serif;
  --ark-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ark-text-display: clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem);  /* one per page */
  --ark-text-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --ark-text-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --ark-text-h3: 1.375rem;
  --ark-text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --ark-text-body: 1rem;
  --ark-text-small: 0.875rem;
  --ark-text-label: 0.6875rem;            /* mono, uppercase, tracked */

  --ark-track-display: -0.045em;
  --ark-track-heading: -0.03em;
  --ark-track-label: 0.16em;

  /* Space: a 4px base, used in these steps only */
  --ark-space-1: 4px;
  --ark-space-2: 8px;
  --ark-space-3: 12px;
  --ark-space-4: 16px;
  --ark-space-5: 24px;
  --ark-space-6: 32px;
  --ark-space-7: 48px;
  --ark-space-8: 64px;
  --ark-space-9: 96px;
  --ark-space-10: 144px;
  --ark-space-section: clamp(96px, 6rem + 6vw, 192px);

  --ark-measure: 62ch;
  --ark-page: 1240px;
  --ark-gutter: clamp(20px, 4vw, 48px);

  /* Shape */
  --ark-radius-s: 6px;     /* chips, small nodes */
  --ark-radius-m: 10px;    /* buttons, inputs */
  --ark-radius-l: 16px;    /* windows, panels */
  --ark-radius-xl: 24px;   /* large media */
  --ark-radius-pill: 999px; /* buttons and chips on marketing pages */
  --ark-grid: 48px;        /* the ARK grid cell */

  /* Depth: hairline plus a soft, ink-tinted shadow. No glows */
  --ark-shadow-1: 0 0 0 1px rgb(15 17 21 / 0.06), 0 1px 2px rgb(15 17 21 / 0.04);
  --ark-shadow-2: 0 0 0 1px rgb(15 17 21 / 0.06), 0 1px 2px rgb(15 17 21 / 0.04),
    0 12px 32px -12px rgb(15 17 21 / 0.12);
  --ark-shadow-3: 0 0 0 1px rgb(15 17 21 / 0.06), 0 2px 4px rgb(15 17 21 / 0.04),
    0 32px 64px -24px rgb(15 17 21 / 0.18);
  --ark-image-outline: rgb(0 0 0 / 0.1);  /* 1px inset outline on every photo */

  /* Motion */
  --ark-ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* things arriving, responding */
  --ark-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* things moving on screen */
  --ark-dur-1: 120ms;    /* press */
  --ark-dur-2: 200ms;    /* hover, small state */
  --ark-dur-3: 320ms;    /* panels, tab content */
  --ark-dur-4: 720ms;    /* explanatory: lines drawing, a message arriving */
  --ark-dur-5: 1100ms;   /* scroll reveals on marketing pages: words rising, photos opening */
  --ark-stagger: 60ms;
}

/* Dark: for product UI and dark marketing surfaces. Light is the default. */
[data-theme="dark"] {
  --ark-canvas: #0e0f12;
  --ark-ink: #f4f4f1;
  --ark-blue: #80a4ea;
  --ark-mist: #17181c;
  --ark-slate: #4b5058;
  --ark-graphite: #9aa0a6;
  --ark-quiet: #6f747c;
  --ark-surface: #17181c;
  --ark-ink-hover: #dcdcd8;
  --ark-blue-press: #9bb8f0;
  --ark-blue-wash: #1b2335;
  --ark-line: rgb(255 255 255 / 0.08);
  --ark-line-strong: rgb(255 255 255 / 0.14);
  --ark-focus: rgb(128 164 234 / 0.4);
  --ark-shadow-1: 0 0 0 1px rgb(255 255 255 / 0.06);
  --ark-shadow-2: 0 0 0 1px rgb(255 255 255 / 0.07), 0 12px 32px -12px rgb(0 0 0 / 0.5);
  --ark-shadow-3: 0 0 0 1px rgb(255 255 255 / 0.08), 0 32px 64px -24px rgb(0 0 0 / 0.6);
  --ark-image-outline: rgb(255 255 255 / 0.1);
}