/* ============================================================
   Jade — Design tokens
   Washi (和紙): unbleached paper, pale ink, one celadon accent.
   This file is the one authored source of Jade's colours, corners,
   spacing, type and motion. Change a token here and nowhere else:
   `just tokens` regenerates tokens.json, the tables in
   tokens/colors.md and the token block of every preview, and CI
   fails when any of them is stale.
   Consumers copy this file byte for byte and pin it by SHA-256:
   jade (design/tokens.css -> JadeDesign's generated DesignTokens,
   read by the iPhone and Mac apps), jade-web (brand/tokens.css)
   and jade-docs (the docs theme).
   ============================================================ */

:root {
  /* ---- Character palette (the pixel cat's own recolorable slots) ----
     Independent of the washi rebrand: this is the recolorable-template
     palette in cat/palette.json, used to hatch a personal pixel companion —
     not Jade's own coloring. */
  --cat-orange:      #F2A33C; /* coat, ears */
  --cat-pink-inner:  #F4A6B0; /* inner ear */
  --cat-cheek:       #F6B8C0; /* cheek blush */
  --cat-nose:        #EF8FA0; /* nose */
  --cat-cream:       #FBEFD8; /* light fur / belly / face */
  --cat-outline:     #4A2E1E; /* warm-brown pixel outline */

  /* ---- Washi (生成り kinari) — paper, ink and celadon. ----
     Each hue is a light/dark pair; the semantic roles below pick one per theme. */
  --washi-paper-light:        #FBFAF6; --washi-paper-dark:        #262523; /* 生成り kinari — app background, the page */
  --washi-surface-light:      #F8F7F2; --washi-surface-dark:      #2A2927; /* standard surface */
  --washi-surface-raised-light:#FFFFFD; --washi-surface-raised-dark:#2D2C29; /* cards, sheets — lighter than the page in both modes */
  --washi-paper-deep-light:   #F3F1EB; --washi-paper-deep-dark:   #1F1E1C; /* 白練 shironeri — sunk surface, sidebar, wells; recessed below the page in both modes */
  --washi-ink-light:          #4A4843; --washi-ink-dark:          #E7E4DC; /* 薄墨 usuzumi — primary text */
  --washi-ink-soft-light:     #706C64; --washi-ink-soft-dark:     #A29E95; /* 利休鼠 rikyū-nezumi — secondary text; >= 4.5:1 on every surface */
  --washi-ink-faint-light:    #8C887F; --washi-ink-faint-dark:    #7B776F; /* disabled text, placeholders, chevrons, decorative marks — never the only carrier of meaning; >= 3:1 on every surface */
  --washi-edge-light:         #8E8A81; --washi-edge-dark:         #7D7970; /* outlines of off/unchosen controls; >= 3:1 */
  --washi-seiji-light:        #6B9A88; --washi-seiji-dark:        #8DB8A7; /* 青磁 seiji — lines, fills, the selected box; >= 3:1 on paper */
  --washi-accent-light:       #4E6F60; --washi-accent-dark:       #A3CBBB; /* seiji, text-safe — the one interactive accent; >= 4.5:1 on every surface and on byakuroku */
  --washi-byakuroku-light:    #E6EFE8; --washi-byakuroku-dark:    #33413A; /* 白緑 byakuroku — primary button fill, icon discs */
  --washi-araishu-light:      #AC523C; --washi-araishu-dark:      #E39580; /* 洗朱 araishu — the one warning color, errors only */

  /* ---- Signature wash — paper -> byakuroku. Hero moments only. ---- */
  --wash-from:        #F3F1EB; /* gradient start — washi paper-deep */
  --wash-to:           #DCE8E0; /* gradient end — a deeper byakuroku */
  --gradient-signature: linear-gradient(160deg, var(--wash-from) 0%, var(--wash-to) 100%); /* avatar, result hero, marketing */

  /* ---- Scene tints (diary/backdrop choices) — fixed across modes ----
     They sit behind photos and don't need to invert: muted, paper-adjacent. */
  --scene-peach: #F2E2D2;
  --scene-pink:  #EFDDDB;
  --scene-cream: #F3EEE2;
  --scene-stone: #E5E2DB;

  /* ---- Record marker — the Diary gutter's "something you logged" disc ----
     A pale byakuroku disc with a deep ink glyph in both modes, so a logged
     moment reads the same by day and by night. */
  --marker-disc-light:  #DCE8E0; --marker-disc-dark:  #C5D6CC; /* the disc */
  --marker-glyph-light: #3E5A4C; --marker-glyph-dark: #26302A; /* the glyph or co-carer initial on it; >= 4.5:1 on the disc */

  /* ---- Liquid Glass material (Apple iOS-style, CSS-only) ----
     CLEAR, not frosted: a low-alpha tint lets the scene show through a light
     blur; the look comes from a crisp specular RIM that wraps the edge (rim
     light), a bright top EDGE + dark bottom bevel for thickness, and a diagonal
     SHEEN glint. (True edge refraction needs an SVG feDisplacementMap backdrop-
     filter, which is Chromium-only — left out so it renders everywhere.) */
  --glass-blur:      10px;   /* clearer than frosted */
  --glass-saturate:  185%;
  --glass-tint-light: rgba(255, 255, 255, 0.20); /* clear white veil — scene shows through */
  --glass-tint-dark:  rgba(255, 255, 255, 0.06);
  --glass-rim-light:  rgba(255, 255, 255, 0.50); /* the wrapped specular rim ring */
  --glass-rim-dark:   rgba(255, 255, 255, 0.42);
  --glass-edge-light: rgba(255, 255, 255, 0.85); /* bright top edge highlight */
  --glass-edge-dark:  rgba(255, 255, 255, 0.70);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.08) 14%, rgba(255,255,255,0) 32%),
                 radial-gradient(150% 80% at 50% -25%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);
  /* Liquid Glass corners — iOS 26/27: glass panels use this generous, continuous
     radius; glass bars, chips and buttons use --radius-pill (capsule = half height).
     Keep them concentric: a glass element's radius <= its container's, so it never flares. */
  --glass-radius: 26px;

  /* ---- Spacing scale (4px base) — shared with the Mac + iOS apps ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- Radius — iOS 26 corner geometry (the apps read these through
     JadeDesign's DesignTokens.Radius). Pick by what the element is, not its size:
     controls (buttons, text fields, chips, badges, segmented, toggles) are capsules;
     cards and containers use --radius-card, the iOS 26 inset-grouped cell corner;
     small standalone media use --radius-tile; chat bubbles use --radius-bubble.
     Nested shapes stay concentric: inner = outer - inset. ---- */
  --radius-tile:   14px;  /* small standalone media: album covers, photo tiles, swatches, preview tiles */
  --radius-bubble: 18px;  /* chat bubbles */
  --radius-card:   26px;  /* cards, panels, sheets, containers */
  --radius-pill:  999px;  /* every control: capsule = half its height */

  /* ---- Type — system font, set light for display; Optima for Jade's voice.
     No separate mono face: data uses the system font's tabular figures. ---- */
  --font-sans: -apple-system, "SF Pro Text", "PingFang SC", system-ui, "Segoe UI", sans-serif;
  --font-voice: Optima, "PingFang SC", -apple-system, sans-serif; /* Jade's narration; CJK falls back to the system font */

  --text-display: 44px;
  --text-h1:      30px;
  --text-h2:      22px;
  --text-h3:      17px;
  --text-body:    16px;
  --text-small:   14px;
  --text-caption: 12px;
  --text-micro:   11px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --leading-tight: 1.18;
  --leading-body:  1.6;
  --tracking-label: 0.08em; /* letter-spaced small labels */

  /* ---- Motion — calm, never bouncy. --ease / --dur are the default control
     transition; the rest are named for what they move. Every looping animation
     has a static fallback under Reduce Motion (prefers-reduced-motion: reduce /
     accessibilityReduceMotion): loops stop, slides become fades. ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* the default control transition */
  --dur:  0.22s; /* the default control transition */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* things arriving: toasts, sheets, fills */
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19); /* things leaving */
  --ease-breath: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* loops: the ensō, skeleton sheen, dots */
  --dur-fast:    0.16s; /* press feedback, exits */
  --dur-slow:    0.36s; /* toast / overlay enter, progress fill */
  --dur-spin:    1.6s;  /* one turn of the ensō spinner */
  --dur-breathe: 2.4s;  /* the ensō's arc lengthening and shortening */
  --dur-shimmer: 1.8s;  /* one skeleton sheen sweep */
  --delay-loading:  0.4s; /* show no indicator for work shorter than this */
  --min-loading:    0.6s; /* once shown, keep an indicator at least this long */
  --hold-toast:     2.6s; /* a toast's resting time */
  --hold-toast-action: 4s; /* a toast's resting time when it carries an action (Undo) */
  /* Break screen — the Mac app's break overlay and the website's mock of it */
  --dur-break-fade:   0.6s; /* the overlay fading in and out */
  --dur-break-scene:  0.5s; /* one scene cross-fading into the next */
  --dur-break-arrive: var(--dur-breathe); /* the cat walking in */
  --dur-break-arrive-reduced: 0.8s; /* the cat's arrival under Reduce Motion: a plain fade */
  --dur-tick:         1s;   /* the countdown line's one-second step */

  /* ---- Web tier — 間 (ma): jadethecat.com and other marketing pages only ----
     Japanese minimalism between MUJI's order and wabi-sabi's quiet: generous empty
     space, a tidy grid, natural-light photography in the usual rounded frames, and a
     light Mincho serif for titles. Radii, colours and buttons are the app's own. */
  --font-display: "Noto Serif", "Noto Serif SC", "Hiragino Mincho ProN", "Songti SC", serif; /* titles only */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* shell commands to copy, and nothing else; data keeps the system font's tabular figures */
  --web-text-hero:  clamp(34px, 4.4vw, 56px);
  --web-text-title: clamp(26px, 2.8vw, 36px);
  --web-text-subtitle: clamp(22px, 2vw, 28px); /* a line under a title, a step below it: the 404 page's Chinese title */
  --web-text-lead:  clamp(16px, 1.3vw, 18px);
  --web-weight-display: 300;
  --web-leading-display: 1.32;   /* Mincho needs air */
  --web-tracking-display: 0.04em;
  --web-tracking-label: 0.14em;  /* small numbered labels: "01 — iPhone" */
  --web-max:     1200px; /* the widest the 12-column grid grows */
  --web-measure: 32em;   /* the longest a line of running text runs */
  --web-gutter:  clamp(24px, calc(12vw - 52.8px), 120px); /* the page's side margin: 24px on a phone to 120px at 1440px */
  --web-grid-gap: var(--space-5); /* between the grid's columns */
  --web-space-9: 80px;   /* one step past --space-8: a page head's inset below the header, the footer's foot */
  --web-section: clamp(88px, 12vw, 160px); /* the ma between sections */
  --web-space-group: clamp(var(--web-space-9), 8vw, 112px); /* between groups of sections: a changelog's first release */
  --web-space-footer: clamp(88px, 9.7vw, 140px); /* the footer's distance from the last section */

  /* ---- iOS tab bar — Apple HIG: 49pt bar, 25pt glyphs, 10pt labels, >=44pt targets ---- */
  --tabbar-height: 49px;
  --tabbar-icon:   25px;
  --tabbar-label:  10px;
}

/* ============================================================
   Semantic — LIGHT (default). Washi paper + ink carry the UI;
   celadon is the one accent, spent sparingly.
   Contrast: fg, fg-muted, accent and warning clear 4.5:1 on bg,
   surface, surface-raised and surface-sunk in both themes; fg-faint
   (disabled / decorative only) clears 3:1. surface-sunk is recessed
   (darker than bg) in both themes. scripts/check-contrast.py asserts
   every intended pairing in CI.
   ============================================================ */
:root,
[data-theme="light"] {
  --bg:            var(--washi-paper-light);
  --surface:       var(--washi-surface-light);
  --surface-raised:var(--washi-surface-raised-light);
  --surface-sunk:  var(--washi-paper-deep-light);
  --fg:            var(--washi-ink-light);
  --fg-muted:      var(--washi-ink-soft-light);
  --fg-faint:      var(--washi-ink-faint-light);
  --border:        rgba(74, 72, 67, 0.16);   /* washi-ink @ 16% */
  --hairline:      rgba(74, 72, 67, 0.09);   /* washi-ink @ 9% */
  --accent:        var(--washi-accent-light);
  --accent-hover:  #46614F;                  /* a filled accent, hovered or pressed */
  --on-accent:     #FFFFFF;                  /* text and icons on a filled accent */
  --accent-soft:   rgba(107, 154, 136, 0.12); /* accent tint fill: selected rows, chips — seiji-light @ 12% */
  --byakuroku:     var(--washi-byakuroku-light);
  --warning:       var(--washi-araishu-light);
  --code-bg:       var(--washi-paper-deep-light);
  --selection:     rgba(141, 184, 167, 0.35); /* text selection — seiji-dark @ 35% */
  --glass-tint:    var(--glass-tint-light);
  --glass-rim:     var(--glass-rim-light);
  --glass-edge:    var(--glass-edge-light);
  /* State components — skeleton bars, the loading overlay's paper veil */
  --skeleton:       var(--washi-paper-deep-light);
  --skeleton-sheen: rgba(255, 255, 253, 0.70);
  --scrim:          rgba(251, 250, 246, 0.72);  /* washi paper veil — never a black dim */
  /* Mood ink — a day's mean valence as ink density (Diary week strip, month sheet, review).
     Grey ink below neutral, celadon above it; each step >= 3:1 on paper, raised and sunk.
     Always a second cue: the day's words and faces carry the meaning too. */
  --mood-ink-1:     var(--washi-ink-soft-light); /* valence <= -0.6: unhappy */
  --mood-ink-2:     var(--washi-edge-light);     /* -0.6 to -0.2: a harder day */
  --mood-ink-3:     #659483;                     /* -0.2 to 0.2: neutral — pale seiji (dim seiji on dark) */
  --mood-ink-4:     var(--washi-accent-light);   /* 0.2 to 0.6: a good day */
  --mood-ink-5:     #46614F;                     /* >= 0.6: happy — deep seiji on light, bright on dark */
  /* Tab-bar material — iOS-native frost, more present than clear glass so it reads over sparse content */
  --tabbar-bg:     rgba(251, 250, 246, 0.60);
  --tabbar-rim:    rgba(255, 255, 255, 0.75);
  --tabbar-edge:   rgba(255, 255, 255, 0.90);
  /* Elevation — shadows tinted with washi ink, never grey */
  --shadow-sm: 0 1px 2px rgba(74, 72, 67, 0.05);
  --shadow-md: 0 4px 14px -6px rgba(74, 72, 67, 0.14);
  --shadow-lg: 0 14px 36px -14px rgba(74, 72, 67, 0.20);
  --shadow-card: 0 5px 10px -3px rgba(74, 72, 67, 0.10);
  --shadow-glass: 0 12px 26px -10px rgba(74, 72, 67, 0.22);
}

/* ============================================================
   Semantic — DARK (warm near-black; every role above, re-picked)
   ============================================================ */
[data-theme="dark"] {
  --bg:            var(--washi-paper-dark);
  --surface:       var(--washi-surface-dark);
  --surface-raised:var(--washi-surface-raised-dark);
  --surface-sunk:  var(--washi-paper-deep-dark);
  --fg:            var(--washi-ink-dark);
  --fg-muted:      var(--washi-ink-soft-dark);
  --fg-faint:      var(--washi-ink-faint-dark);
  --border:        rgba(231, 228, 220, 0.16); /* washi-ink-dark @ 16% */
  --hairline:      rgba(231, 228, 220, 0.09); /* washi-ink-dark @ 9% */
  --accent:        var(--washi-accent-dark);
  --accent-hover:  #B7D9CB;
  --on-accent:     #1E2622;
  --accent-soft:   rgba(141, 184, 167, 0.16); /* seiji-dark @ 16% */
  --byakuroku:     var(--washi-byakuroku-dark);
  --warning:       var(--washi-araishu-dark);
  --code-bg:       var(--washi-surface-dark);
  --selection:     rgba(163, 203, 187, 0.30);
  --glass-tint:    var(--glass-tint-dark);
  --glass-rim:     var(--glass-rim-dark);
  --glass-edge:    var(--glass-edge-dark);
  /* State components — skeleton bars, the loading overlay's paper veil */
  --skeleton:       rgba(231, 228, 220, 0.07); /* washi-ink-dark @ 7% */
  --skeleton-sheen: rgba(231, 228, 220, 0.06);
  --scrim:          rgba(38, 37, 35, 0.72);    /* washi paper-dark veil */
  /* Mood ink — on dark, a happier day is a brighter celadon */
  --mood-ink-1:     var(--washi-ink-soft-dark);
  --mood-ink-2:     var(--washi-edge-dark);
  --mood-ink-3:     #739486;
  --mood-ink-4:     var(--washi-seiji-dark);
  --mood-ink-5:     var(--washi-accent-dark);
  /* Tab-bar material — iOS-native frost */
  --tabbar-bg:     rgba(42, 41, 39, 0.55);
  --tabbar-rim:    rgba(255, 255, 255, 0.14);
  --tabbar-edge:   rgba(255, 255, 255, 0.22);
  /* Elevation — near-black on dark paper */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 6px 18px -8px rgba(0, 0, 0, 0.60);
  --shadow-lg: 0 18px 44px -16px rgba(0, 0, 0, 0.70);
  --shadow-card: 0 5px 10px -3px rgba(0, 0, 0, 0.50);
  --shadow-glass: 0 12px 26px -10px rgba(0, 0, 0, 0.65);
}

::selection { background: var(--selection); }