/* LogicLab Design Tokens
 * Source: v5/src/App.css, v5/src/pages/StartPage.css, v5/src/components/settings/*.css,
 *         v5/src/components/languageSwitcher/LanguageSwitcher.css
 * Every value below is verbatim from the production codebase.
 */

@font-face {
  font-family: 'insungit Cutelively jisu';
  src: url('../fonts/insungit-Cutelively-jisu-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── BRAND SURFACES — three only, always flat ────────── */
  --ll-yellow: #F7D801;       /* StartPage background */
  --ll-green:  #37854D;       /* TopBar fill, card frames stroke target, active accent */
  --ll-cream:  #F6E7D4;       /* CardPage background, generating overlay tint base */

  /* ── INK ────────────────────────────────────────────── */
  --ll-ink:        #000000;   /* All hand-lettered copy, hand-drawn outlines */
  --ll-ink-warm:   #874F3D;   /* Card frame stroke (PointCard / OVCard) */
  --ll-paper:      #FFFFFF;   /* Settings Step 1 background, white text on green/cream */
  --ll-paper-warm: #F9F9F7;   /* Inner well of card frames */

  /* ── TRANSLUCENT BLACK SCRIMS — chrome only, never content ─ */
  --ll-scrim-low:    rgba(0, 0, 0, 0.28);   /* Lang switcher trigger rest */
  --ll-scrim-low-h:  rgba(0, 0, 0, 0.38);   /* Lang switcher trigger hover */
  --ll-scrim-mid:    rgba(0, 0, 0, 0.45);   /* Switch-camera button on live feed */
  --ll-scrim-high:   rgba(0, 0, 0, 0.52);   /* Gemini action buttons */
  --ll-scrim-modal:  rgba(0, 0, 0, 0.92);   /* Config modal backdrop */
  --ll-scrim-detect: rgba(0, 0, 0, 0.80);   /* Dev detection panel */

  /* ── BRAND TINTS ────────────────────────────────────── */
  --ll-green-tint-12: rgba(55, 133, 77, 0.12);  /* Active option in lang menu */
  --ll-hairline-w50:  rgba(255, 255, 255, 0.5); /* Outline of dark floating chrome */
  --ll-hover-ink-06:  rgba(0, 0, 0, 0.06);      /* Hover wash on light surfaces */

  /* ── TYPE ───────────────────────────────────────────── */
  --ll-font-hand:  'insungit Cutelively jisu', 'Apple SD Gothic Neo', sans-serif;
  --ll-font-system:'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;

  /* Sizes are vw-based; reference frame 180px → 100vw */
  --ll-type-disclaimer: 1.67vw;   /* 3px in figma; legal fineprint */
  --ll-type-camera-lbl: 2.20vw;   /* switch-camera button label */
  --ll-type-step-label: 3.33vw;   /* "STEP1." overlay */
  --ll-type-guide:      3.74vw;   /* settings step instruction */
  --ll-type-box-line:   3.95vw;   /* settings step 1 inside-box copy */
  --ll-type-hero:       4.28vw;   /* settings step 4 "let's go" */
  --ll-type-icon-glyph: 4.50vw;   /* ⇄ camera-switch glyph */

  /* ── RADIUS ─────────────────────────────────────────── */
  --ll-radius-pill:    999px;     /* config select, lang trigger long form */
  --ll-radius-modal:   16px;
  --ll-radius-button:  12px;      /* lang switcher trigger */
  --ll-radius-action:  10px;      /* gemini download/share button */
  --ll-radius-flag:    3px;       /* country flag chip */
  --ll-radius-step1:   2.29vw;    /* hand-drawn box on step 1 */
  --ll-radius-topbar:  clamp(8px, 3.2vmin, 20px); /* topbar bottom corners */

  /* ── STROKE ─────────────────────────────────────────── */
  --ll-stroke-handdrawn: 0.56vw;  /* black outline on Step 1 hand-drawn box */
  --ll-stroke-hairline:  1px solid rgba(255, 255, 255, 0.5);

  /* ── ELEVATION ──────────────────────────────────────── */
  --ll-shadow-button: 0 2px 8px rgba(0, 0, 0, 0.30);
  --ll-shadow-toast:  0 4px 20px rgba(0, 0, 0, 0.35);
  --ll-shadow-menu:   0 8px 28px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.08);
  --ll-shadow-trigger:0 2px 10px rgba(0, 0, 0, 0.12);
  --ll-shadow-flag:   0 1px 3px rgba(0, 0, 0, 0.15);
  --ll-shadow-inset:  inset 0.2px 0.8px 1.8px rgba(0, 0, 0, 0.83); /* photo recess */

  /* ── BACKDROP-FILTER ────────────────────────────────── */
  --ll-blur-trigger: blur(10px);
  --ll-blur-action:  blur(8px);
  --ll-blur-modal:   blur(15px);

  /* ── MOTION ─────────────────────────────────────────── */
  --ll-spring-cloud:   55 14;     /* stiffness damping — heavy soft landing */
  --ll-spring-letter:  65 13;     /* word-mark letters, snappier */
  --ll-stagger-base:   0.15s;
  --ll-stagger-step:   0.09s;
  --ll-page-fade:      0.8s;
  --ll-press-scale:    0.97;
  --ll-press-opacity:  0.75;
  --ll-press-dur:      0.10s;

  /* ── Z-INDEX SCALE ──────────────────────────────────── */
  --ll-z-content:   1;
  --ll-z-overlay:   10;
  --ll-z-chrome:    30;
  --ll-z-toast:     9000;
  --ll-z-lang:      10000;
}

/* ── Semantic helpers ────────────────────────────────── */
.ll-bg-yellow { background: var(--ll-yellow); }
.ll-bg-green  { background: var(--ll-green); }
.ll-bg-cream  { background: var(--ll-cream); }
.ll-bg-paper  { background: var(--ll-paper); }

.ll-text-hand   { font-family: var(--ll-font-hand); font-weight: 400; }
.ll-text-system { font-family: var(--ll-font-system); }
.ll-text-hero   { font-family: var(--ll-font-hand); font-size: var(--ll-type-hero); line-height: 1; padding-top: 0.1em; }
.ll-text-guide  { font-family: var(--ll-font-hand); font-size: var(--ll-type-guide); line-height: 1; padding-top: 0.1em; }
.ll-text-box    { font-family: var(--ll-font-hand); font-size: var(--ll-type-box-line); line-height: 1.15; padding-top: 0.1em; }
.ll-text-fineprint { font-family: var(--ll-font-system); font-size: var(--ll-type-disclaimer); letter-spacing: 0.01em; }

/* Press behavior — apply to any tappable element */
.ll-press:active {
  opacity: var(--ll-press-opacity);
  transform: scale(var(--ll-press-scale));
  transition: opacity var(--ll-press-dur), transform var(--ll-press-dur);
}