/* Shotori v2 — design tokens (Direction B "Pastel kawaii"; ROUND 6 mascot palette: pink · deep purple · gold).
   Source: mockup_B/tokens.css. One family (Pretendard), 4-step type scale, 8px grid.
   Device chrome from the mockup is replaced by real safe-area insets. */
:root {
  /* ---------- colour ---------- */
  /* ROUND 6 brand (SPEC_round6 §1): the palette follows the mascot "Shotori" — cotton-candy pink body, deep-purple
     lens / app-icon backdrop, gold crown. Token NAMES are unchanged (every screen reads them); values were re-tuned.
     AA checks (WCAG 2.1): ink-900 on cream-50 14.9:1 · ink-900 on sakura-400 7.4:1 · ink-700 on cream-50 7.5:1 ·
     sakura-700 on cream-50 5.9:1 · white on grape-500 7.0:1 · ink-900 on gold-400 9.6:1 · butter-700 on butter-200 6.6:1 */
  --cream-50:  #FFF7FA;    /* app background: blush cream */
  --cream-100: #FFEEF4;
  --cream-200: #F6DDE8;    /* hairlines, card edges */
  --paper:     #FFFFFF;

  --sakura-50:  #FFF0F6;
  --sakura-100: #FFE3EE;
  --sakura-200: #FFC8DD;
  --sakura-300: #FFA9C9;
  --sakura-400: #FF8FB6;   /* PRIMARY fill = mascot body (ink text on it = 7.4:1) */
  --sakura-600: #E8508A;   /* sticker edge, active ring, stamp ink */
  --sakura-700: #B4246A;   /* pink TEXT on cream/white (5.9:1) */

  --ink-900: #2E1453;      /* deep purple (mascot lens / icon backdrop) — body text */
  --ink-700: #5E4877;
  --ink-400: #A796B8;      /* decorative / disabled only */
  --ink-100: #EEE4F3;

  --grape-300: #C9A8FF;
  --grape-400: #8B4FE8;
  --grape-500: #6C2BD9;    /* accent fill (white text 7.0:1) */
  --grape-700: #4A1A9E;
  --grape-900: #2A0F55;

  --gold-300: #FFDD7A;
  --gold-400: #F6C343;     /* crown gold: badges, S stamp, confetti (ink text 9.6:1) */
  --gold-500: #E3A520;
  --gold-700: #7A4A00;     /* gold TEXT on light */

  --butter-200: #FFF0C2;
  --butter-700: #7A4A00;   /* text on butter-200 (6.6:1) */
  --butter-500: #F2B630;

  --brand-grad: linear-gradient(140deg, #FFA9C9 0%, #FF8FB6 45%, #C46BF0 100%);
  --grape-grad: radial-gradient(120% 90% at 30% 15%, #8B3FE0 0%, #5A1FB0 55%, #33107A 100%);
  --gold-grad:  linear-gradient(180deg, #FFE38A 0%, #F6C343 55%, #D99A1E 100%);

  --glass:      rgba(255, 247, 250, .80);
  --glass-open: rgba(255, 247, 250, .94);
  --glass-line: rgba(255, 255, 255, .90);
  --glass-ink:  var(--ink-900);
  --scrim-top:  linear-gradient(180deg, rgba(255,247,250,.85) 0%, rgba(255,247,250,.45) 60%, rgba(255,247,250,0) 100%);
  --crop-dim:   rgba(46, 20, 83, .28);
  --sheet-dim:  rgba(46, 20, 83, .40);

  /* ---------- type ---------- */
  --font: "Pretendard Variable", "Pretendard", -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --t-cap:   12px;  --lh-cap:   16px;
  --t-body:  15px;  --lh-body:  22px;
  --t-title: 20px;  --lh-title: 28px;
  --t-disp:  40px;  --lh-disp:  44px;
  --track-tight: -0.02em;

  /* ---------- spacing ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px;
  --gutter: 16px;

  /* ---------- radii ---------- */
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px;

  /* ---------- elevation ---------- */
  --sh-1: 0 1px 2px rgba(46,20,83,.06), 0 4px 12px rgba(46,20,83,.07);
  --sh-2: 0 2px 6px rgba(46,20,83,.08), 0 12px 32px rgba(46,20,83,.15);
  --sh-sticker: 0 3px 0 var(--sakura-600);
  --sh-sticker-ink: 0 3px 0 rgba(46,20,83,.20);
  --sh-sticker-gold: 0 3px 0 var(--gold-500);
  --blur: blur(20px) saturate(1.4);

  /* ---------- touch ---------- */
  --hit: 44px;
  --btn-h: 56px;
  --shutter: 80px;

  /* ---------- device: real insets (dev override: ?safe=47,34 sets --safe-*-dev) ---------- */
  --safe-top: var(--safe-top-dev, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--safe-bottom-dev, env(safe-area-inset-bottom, 0px));
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- motion ---------- */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --d-tap: 120ms;
  --d-pop: 320ms;
  --d-stamp: 520ms;
}

/* adaptive HUD over a dark camera feed (AR only) */
body.feed-dark {
  --glass: rgba(46, 20, 83, .55);
  --glass-open: rgba(46, 20, 83, .82);
  --glass-line: rgba(255, 255, 255, .22);
  --glass-ink: #FFFFFF;
  --scrim-top: linear-gradient(180deg, rgba(46,20,83,.62) 0%, rgba(46,20,83,.30) 60%, rgba(46,20,83,0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-pop: 1ms; --d-stamp: 1ms; --ease-bounce: linear; }
}