/*
  Koyama Studio design tokens, v1 (2026-10).
  Source of truth: skill/koyama-mini-app/brand/tokens.css. Copy into each app as src/styles/tokens.css.
  Concept: a print workshop. Paper, ink, one red seal, trim marks.

  Theme: light on :root. Dark when the OS asks for it (outside Telegram),
  or when the app sets data-theme="dark" from Telegram.WebApp.colorScheme.
  .k-light / .k-dark force a theme on one element (used for previews).
*/

:root,
.k-light {
  /* Color */
  --paper: #F2F2EE;   /* page ground */
  --card: #FBFBF9;    /* sheets, tiles, raised surfaces */
  --well: #E4E4DF;    /* photo stage, inputs, pressed state */
  --line: #D3D2CC;    /* hairlines */
  --ink: #141414;     /* text, primary buttons, icons */
  --ink-2: #55544F;   /* secondary text */
  --ink-3: #6B6A65;   /* hints, placeholders, disabled (4.9:1 on paper) */
  --on-ink: #F2F2EE;  /* text and icons on an ink surface */
  --seal: #C8381E;    /* the seal only: logo, active marker, success stamp. Never for text or buttons */
  --on-seal: #FFFFFF;
  --scrim: rgba(20, 20, 20, 0.45);
  --photo-scrim: rgba(10, 10, 10, 0.55); /* outside the crop box */
  color-scheme: light;
}

:root {
  /* Type */
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Zen Kaku Gothic New", "Manrope", system-ui, -apple-system, sans-serif;
  --text-2xs: 11px;    /* tool bar labels */
  --text-xs: 12px;     /* captions, readouts */
  --text-sm: 13.5px;   /* secondary text */
  --text-md: 15px;     /* body, buttons */
  --text-lg: 18px;     /* sheet titles */
  --text-xl: 24px;     /* screen titles (display face) */
  --text-2xl: 32px;    /* store and marketing headlines (display face) */
  --track-label: 0.14em;

  /* Space, 4 pt grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Shape */
  --r-seal: 3px;   /* the seal and the slider thumb: nearly square */
  --r-sm: 8px;     /* chips, inputs */
  --r-md: 12px;    /* buttons, tiles */
  --r-lg: 20px;    /* bottom sheets */
  --hair: 1px;
  --tap: 44px;     /* minimum touch target */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --card: #1B1B1A;
    --well: #262624;
    --line: #33332F;
    --ink: #EDEDE8;
    --ink-2: #A6A59F;
    --ink-3: #8E8D87;
    --on-ink: #121211;
    --seal: #E0533A;
    --on-seal: #FFFFFF;
    --scrim: rgba(0, 0, 0, 0.6);
    --photo-scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"],
.k-dark {
  --paper: #121211;
  --card: #1B1B1A;
  --well: #262624;
  --line: #33332F;
  --ink: #EDEDE8;
  --ink-2: #A6A59F;
  --ink-3: #8E8D87;
  --on-ink: #121211;
  --seal: #E0533A;
  --on-seal: #FFFFFF;
  --scrim: rgba(0, 0, 0, 0.6);
  --photo-scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}