/*
 * Kistrl Share design tokens · direction A "Front door".
 *
 * The live Kistrl brand (kistrl/frontend/src/styles/theme.css and kistrl.com): parchment and ink,
 * a wine primary that turns lilac in dark mode, violet only for links and focus, lilac for the key.
 * Only the form you write in is white, following Kistrl's rule that only what you write or read is white.
 *
 * Drop-in: this file replaces public/styles/tokens.css. The last block maps the names that
 * public/styles/app.css reads (--color-*, --space-1..5, ...) onto these tokens, so app.css keeps
 * working until components.css replaces it.
 *
 * Text pairs meet 4.5:1 and field edges and the focus ring 3:1, in both modes.
 * Fonts are self-hosted (CSP font-src 'self'): copy design/fonts/*.woff2 to public/fonts/.
 */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;
  --text-lede: 1.125rem;
  --text-title: 1.375rem;
  --text-section: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --display-weight: 460;
  --display-leading: 1.02;
  --display-tracking: -0.035em;
  --heading-weight: 540;
  --heading-tracking: -0.02em;
  --label-weight: 600;
  --button-weight: 560;

  /* Space: one scale, named by size */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-2xl: 56px;
  --space-3xl: 88px;
  --gutter: clamp(16px, 4vw, 40px);
  --page-max: 1200px;
  --card-width: 480px;
  --card-pad: 28px;
  --card-pad-sm: 20px;
  --control-height: 48px;

  /* Radius */
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-input: 10px;
  --radius-mark: 4px;
  --radius-pill: 999px;

  /* Colour: surfaces */
  --background: #f2f0eb;
  --foreground: #292827;
  --card: #ffffff;
  --card-foreground: #292827;
  --card-edge: #dedbd4;
  --field: #ffffff;
  --field-foreground: #292827;
  --surface-sunken: #f5f3ee;
  --ledger-surface: #f8f6f2;

  /* Colour: actions */
  --primary: #421d24;
  --primary-hover: #5a2a33;
  --primary-foreground: #ffffff;
  --secondary: #ffffff;
  --secondary-foreground: #292827;
  --hover: rgb(41 40 39 / 6%);

  /* Colour: supporting text, lines, focus */
  --muted: #efece6;
  --muted-foreground: #575551;
  --placeholder: #6b6965;
  --border: #e3e0d9;
  --border-strong: #cbc6bd;
  --input: #84817c;
  --input-hover: #575551;
  --ring: #714cb6;
  --ring-soft: rgb(113 76 182 / 22%);
  --link: #714cb6;

  /* Colour: states */
  --destructive: #a32745;
  --destructive-surface: #fbe7ec;
  --destructive-foreground: #8a1f3a;
  --success: #d9eee5;
  --success-foreground: #275d56;
  --warning: #fff0d2;
  --warning-foreground: #73500f;

  /* Colour: Share-specific roles */
  --key-mark: #e4dcfc;
  --key-mark-foreground: #3b2a6b;
  --secret-surface: #f5f3ee;
  --secret-foreground: #292827;
  --secret-edge: #dedbd4;
  --empty-icon: #421d24;
  --toast: #292827;
  --toast-foreground: #f2f0eb;
  --section-rule: #dedbd4;
  --step-edge: #cbc6bd;
  --step-ink: #421d24;
  --brand-ink: #292827;
  --brand-ink-soft: #575551;
  --brand-bird: #421d24;
  --eyebrow: #6644ac;
  --hero-ink: #292827;
  --hero-ink-soft: #3b3936;
  --point-icon: #421d24;

  /* Elevation: the card is the one thing that lifts at rest */
  --shadow-card: 0 1px 2px rgb(41 40 39 / 5%), 0 12px 32px -12px rgb(41 40 39 / 14%);
  --shadow-popover: 0 0 0 1px rgb(41 40 39 / 8%), 0 4px 10px -2px rgb(41 40 39 / 10%), 0 18px 36px -8px rgb(41 40 39 / 18%);

  /* A data: URI, allowed by img-src 'self' data: */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6' fill='none' stroke='%23575551' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1c1918;
    --foreground: #f2f0eb;
    --card: #262221;
    --card-foreground: #f2f0eb;
    --card-edge: #3f3a38;
    --field: #1f1c1b;
    --field-foreground: #f2f0eb;
    --surface-sunken: #201d1c;
    --ledger-surface: #221f1e;

    --primary: #d4c7ff;
    --primary-hover: #e2d9ff;
    --primary-foreground: #2a1217;
    --secondary: #2e2a29;
    --secondary-foreground: #f2f0eb;
    --hover: rgb(242 240 235 / 8%);

    --muted: #2e2a29;
    --muted-foreground: #b8b3ab;
    --placeholder: #a39e96;
    --border: #3f3a38;
    --border-strong: #57514d;
    --input: #7d7771;
    --input-hover: #a39e96;
    --ring: #c9b8ff;
    --ring-soft: rgb(201 184 255 / 25%);
    --link: #c4b2ff;

    --destructive: #ff9aaf;
    --destructive-surface: #45202b;
    --destructive-foreground: #ffc2cf;
    --success: #203d35;
    --success-foreground: #a1e3c9;
    --warning: #49391e;
    --warning-foreground: #f5d699;

    --key-mark: #3d3355;
    --key-mark-foreground: #e2d9ff;
    --secret-surface: #1f1c1b;
    --secret-foreground: #f2f0eb;
    --secret-edge: #3f3a38;
    --empty-icon: #d4c7ff;
    --toast: #f2f0eb;
    --toast-foreground: #1c1918;
    --section-rule: #3f3a38;
    --step-edge: #57514d;
    --step-ink: #d4c7ff;
    --brand-ink: #f2f0eb;
    --brand-ink-soft: #b8b3ab;
    --brand-bird: #d4c7ff;
    --eyebrow: #c9b8ff;
    --hero-ink: #f2f0eb;
    --hero-ink-soft: #cfcac2;
    --point-icon: #d4c7ff;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 36px -14px rgb(0 0 0 / 55%);
    --shadow-popover: 0 0 0 1px rgb(255 255 255 / 8%), 0 4px 10px -2px rgb(0 0 0 / 40%), 0 18px 36px -8px rgb(0 0 0 / 55%);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6' fill='none' stroke='%23b8b3ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}