/* Generated by tools/build.mjs from _ds/hokan-design-system-3594b451-c342-49c5-9cc5-b125a3a3e585/tokens/.
   Do not edit: change the design system and rebuild. */

/* ---- tokens/colors.css ---- */
:root {
  /* Core ramp */
  --ink-900: #14110F;   /* sumi */
  --ink-700: #24201D;
  --ink-500: #3A3632;   /* charcoal */
  --clay-600: #6E675C;
  --clay-400: #8C857A;
  --clay-200: #C4BDB2;
  --washi-100: #EFEAE0;
  --washi-50: #F7F4ED;
  --washi-0: #FDFBF6;
  --seal-500: #B23A2E;  /* hanko */
  --seal-600: #8E2C22;  /* hover, pressed */
  --seal-400: #D9664F;  /* dark-mode accent */
  --seal-50: #F6E7E4;   /* tint only */
  --cardano-blue: #0033AD; /* footer lockup only */

  /* Light mode semantics */
  --page: var(--washi-100);
  --card: var(--washi-50);
  --elevated: var(--washi-0);
  --text: var(--ink-900);
  --text-2: var(--ink-500);
  --text-muted: var(--clay-600);
  --border: #DAD3C6;          /* decorative dividers only */
  --border-input: var(--clay-400); /* any border that is the only cue a control exists */
  --accent: var(--seal-500);
  --accent-hover: var(--seal-600);
  --accent-text: var(--washi-100); /* text on accent fills */
  --accent-tint: var(--seal-50);
  --focus-ring: var(--ink-900);
  --inverse-surface: var(--ink-900);
  --inverse-text: var(--washi-100);

  /* Escrow states, light */
  --state-locked: #B23A2E;
  --state-released: #3E6B4A;
  --state-pending: #8A5F1B;
  --state-expired: #6E675C;
  --state-dispute: #14110F;   /* derived: neutral-strong, icon carries meaning */
  --state-refunded: #3A3632;  /* derived */
}

[data-theme="dark"] {
  --page: var(--ink-900);
  --card: #1C1917;
  --elevated: var(--ink-700);
  --text: var(--washi-100);
  --text-2: var(--clay-200);
  --text-muted: var(--clay-400);
  --border: #2E2A26;
  --border-input: #7F776C;
  --accent: var(--seal-400);
  --accent-hover: #E27A64;
  --accent-text: var(--ink-900); /* never washi on accent in dark */
  --accent-tint: #3A241F;
  --focus-ring: var(--washi-100);
  --inverse-surface: var(--washi-100);
  --inverse-text: var(--ink-900);

  --state-locked: #D9664F;
  --state-released: #6FA57E;
  --state-pending: #C79A3E;
  --state-expired: #8C857A;
  --state-dispute: #EFEAE0;
  --state-refunded: #C4BDB2;
}

/* ---- tokens/typography.css ---- */
:root {
  --font-display: "Instrument Serif", Georgia, serif;      /* regular + italic only */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;     /* 400 500 600, never above */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;   /* amounts, hashes, figures */

  --text-display-xl: 48px; --lh-display-xl: 1.05; /* @kind other */
  --text-display-lg: 40px; --lh-display-lg: 1.1; /* @kind other */
  --text-display-md: 32px; --lh-display-md: 1.15; /* @kind other */
  --text-heading-lg: 24px; --lh-heading-lg: 1.25; /* @kind other */
  --text-heading-md: 20px; --lh-heading-md: 1.3; /* @kind other */
  --text-heading-sm: 18px; --lh-heading-sm: 1.35; /* @kind other */
  --text-body-lg: 16px;    --lh-body-lg: 1.55; /* @kind other */
  --text-body-md: 14px;    --lh-body-md: 1.5; /* @kind other */
  --text-caption: 13px;    --lh-caption: 1.45; /* @kind other */
  --text-mono-md: 14px;    --lh-mono-md: 1.5; /* @kind other */
  --text-mono-sm: 13px;    --lh-mono-sm: 1.45; /* @kind other */

  --tracking-display: -0.01em; /* @kind other */
  --tracking-wordmark: -0.02em; /* @kind other */
  --tracking-label: 0.04em; /* @kind other */ /* mono eyebrow labels, uppercase */
  --weight-regular: 400; /* @kind other */ --weight-medium: 500; /* @kind other */ --weight-semibold: 600; /* @kind other */
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 48px;
  --content-max: 1120px; --prose-max: 640px;
}

/* ---- tokens/elevation.css ---- */
:root {
  --radius-sm: 4px; --radius-md: 6px; /* never 12px or above */
  --hairline: 1px; --hairline-fine: 0.5px;
  --shadow-none: none; /* flat surfaces; no drop shadows beyond a 1px hairline */
  --ring: 0 0 0 2px var(--focus-ring);
  --ring-offset: 0 0 0 2px var(--page), 0 0 0 4px var(--focus-ring);
  --motion-fast: 120ms; /* @kind other */ --motion-base: 180ms; /* @kind other */ /* fades under 200ms */
  --ease: cubic-bezier(.2,0,0,1); /* @kind other */
}

/* ---- tokens/base.css ---- */
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--clay-400); text-underline-offset: 2px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
code, kbd, samp, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }