/* Six-IR design tokens. Direction: "Light table", in Tyeke's Media colours.
   A print lab, not a SaaS dashboard: photos sit like prints with crop marks, every action
   is a pill, numbers are set in mono. The colours are the light mode of tyekesmedia.com:
   a cool daylight ground, ink type, headings filled with the dark "steel" gradient, and the
   cyan-blue-violet-magenta spectrum for accents. The dark screens use its night colours. */
:root {
  /* Raw palette: tyekesmedia.com light mode (html.theme-light) */
  --ink-900: #0B0D1F;   /* chrome: type, primary pills, 17.7:1 on the ground */
  --ink-700: #262C55;   /* steel mid: pill hover */
  --ink-500: #4A5072;   /* mist: secondary text, 7.2:1 */
  --ink-300: #9198BE;   /* disabled text, decorative only */
  --paper-50: #FFFFFF;  /* abyss: raised surfaces */
  --paper-100: #F4F5FA; /* void: page ground */
  --paper-200: #E9EBF4; /* wells, hover */
  --paper-300: #D9DCE8; /* hairlines, = rgba(20,28,80,.13) on the ground */
  --tm-cyan: #047393;   /* coloured text, 5.0:1 */
  --tm-blue: #2352D8;
  --tm-violet: #6A2BD6; /* the single-colour accent and focus, 6.6:1 */
  --tm-plasma: #B8168F;
  --tm-violet-100: #ECE6FA;
  --steel: linear-gradient(180deg, #0B0D1F 0%, #262C55 45%, #3D2A7A 60%, #0B0D1F 100%);
  --spectrum: linear-gradient(90deg, #047393, #2352D8 38%, #6A2BD6 66%, #B8168F);
  /* tyekesmedia.com dark mode, for the night screens */
  --night: #03030A;
  --night-2: #080B1F;
  --night-line: rgba(150, 170, 255, .14);
  --night-line-2: rgba(150, 170, 255, .28);
  --tm-chrome-dark: #E9EEFF; /* text on night */
  --tm-mist-dark: #9198BE;   /* secondary text on night, 6.9:1 */
  --tm-cyan-dark: #22E4FF;   /* coloured text on night, 12.6:1 */
  --leaf-600: #137A43;  /* the site's own "live" green */
  --leaf-100: #DDF1E6;
  --rust-700: #B4232A;
  --rust-100: #FBE1E3;

  /* Semantic roles */
  --bg: var(--paper-100);
  --surface: var(--paper-50);
  --surface-sunk: var(--paper-200);
  --surface-inverse: var(--ink-900);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-disabled: var(--ink-300);
  --text-inverse: var(--tm-chrome-dark);
  --text-inverse-muted: var(--tm-mist-dark);
  --line: var(--paper-300);
  --line-strong: var(--ink-900);
  --accent: var(--tm-violet);
  --accent-fill: var(--spectrum); /* bars, rules and marks that can carry a gradient */
  --accent-text: var(--tm-cyan);
  --accent-soft: var(--tm-violet-100);
  --success: var(--leaf-600);
  --success-soft: var(--leaf-100);
  --danger: var(--rust-700);
  --danger-soft: var(--rust-100);
  --focus: var(--tm-violet);
  --table: var(--night-2); /* behind a finished print */
  --checker: repeating-conic-gradient(#E3E6F0 0 25%, #F7F8FC 0 50%) 0 0 / 16px 16px; /* shows see-through areas */

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-2xs: 11px;  /* mono labels */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;   /* body */
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: clamp(32px, 5vw, 44px);
  --fs-4xl: clamp(40px, 8vw, 84px);
  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --tracking-display: -0.035em;
  --tracking-label: 0.08em;

  /* Spacing (4 px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;

  /* Radius */
  --r-print: 2px;   /* photos sit like prints, nearly square */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;     /* cards, from the reference */
  --r-pill: 999px;  /* every action */

  /* Shadow: the UI is flat; only a finished print casts one */
  --sh-none: none;
  --sh-raise: 0 1px 0 rgba(20, 17, 15, .06), 0 1px 2px rgba(20, 17, 15, .06);
  --sh-pop: 0 12px 32px -12px rgba(20, 17, 15, .28), 0 2px 6px rgba(20, 17, 15, .08);
  --sh-print: 0 2px 0 rgba(0, 0, 0, .25), 0 30px 60px -24px rgba(0, 0, 0, .65);

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 420ms;
  --t-develop: 900ms; /* the print "developing" on the result screen */
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-develop: 0ms; }
}