/*
 * Översetter website — design tokens.
 *
 * The one place for colours, type and spacing. Mapping to the Flutter
 * tokens in oeversetter-v2/lib/design/ is documented in README.md.
 *
 * Light by default (product plan: "hell"), dark when the system asks for it —
 * the old översetter.de was dark, and the glass surfaces work in both.
 * Every #RRGGBB pair used for text is checked by scripts/contrast.py, for the
 * :root block and for the dark block below.
 */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Colour — solid values (also the fallback when glass is unavailable) */
  --c-ground: #eef3f4;       /* page ground behind the glow */
  --c-surface: #fbfcfc;      /* glass card, as seen over the ground */
  --c-surface-out: #e8f0f2;  /* output pane — helles Küstenblau */
  --c-ink: #16262e;          /* text — same ink as the app */
  --c-ink-soft: #3f5058;     /* secondary text */
  --c-ink-muted: #56666d;    /* hints, counters, placeholders */
  --c-petrol: #1b5a66;       /* accent — links */
  --c-button: #1b5a66;       /* primary button */
  --c-button-hover: #123f48;
  --c-on-button: #ffffff;
  --c-error: #9b3a1f;        /* terracotta, darkened for text contrast */
  --c-draft: #f8ece6;        /* ground of draft notices */
  --c-focus: #1b5a66;

  /* Colour — translucent layers */
  --c-line: rgba(22, 38, 46, 0.1);
  --c-line-strong: rgba(22, 38, 46, 0.18);
  --c-hover: rgba(22, 38, 46, 0.06);
  --c-focus-fill: rgba(255, 255, 255, 0.7);  /* text field while typing */
  --c-line-dashed: rgba(27, 90, 102, 0.4);   /* ad frame */
  --glow-1: rgba(98, 172, 190, 0.6);     /* coast blue */
  --glow-2: rgba(27, 90, 102, 0.32);     /* petrol */
  --glow-3: rgba(190, 222, 205, 0.8);    /* pale sea-green */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.52));
  --glass-out: rgba(226, 238, 241, 0.6);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  --glass-blur: blur(28px) saturate(170%);
  --shadow: 0 1px 2px rgba(16, 40, 48, 0.05), 0 24px 48px -26px rgba(16, 40, 48, 0.3);

  /* Type */
  --f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  --fs-text: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* translator text */
  --fs-h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);

  /* Shape and space */
  --radius: 28px;
  --radius-small: 16px;
  --gutter: clamp(16px, 4vw, 32px);
  --page: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-ground: #0c1316;
    --c-surface: #182226;
    --c-surface-out: #13272c;
    --c-ink: #edf3f4;
    --c-ink-soft: #bccacf;
    --c-ink-muted: #98a9af;
    --c-petrol: #86cdd8;
    --c-button: #8fd3dd;
    --c-button-hover: #b3e3ea;
    --c-on-button: #0b2a30;
    --c-error: #f0a184;
    --c-draft: #33231d;
    --c-focus: #86cdd8;

    --c-line: rgba(237, 243, 244, 0.1);
    --c-line-strong: rgba(237, 243, 244, 0.2);
    --c-hover: rgba(237, 243, 244, 0.08);
    --c-focus-fill: rgba(255, 255, 255, 0.05);
    --c-line-dashed: rgba(134, 205, 216, 0.4);
    --glow-1: rgba(27, 90, 102, 0.55);
    --glow-2: rgba(70, 150, 165, 0.25);
    --glow-3: rgba(30, 60, 70, 0.6);
    --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.05));
    --glass-out: rgba(70, 150, 165, 0.1);
    --glass-edge: rgba(255, 255, 255, 0.12);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  }
}