/* abroo.io · /assets/tokens.css
 * Shared design tokens for ALL apps (landing, plan, memo, …).
 *
 * 2026-05-25 audit: created via Tier 4 safe extraction.
 * Source = web/styles.css :root block (canonical).
 *
 * USAGE:
 *   <link rel="stylesheet" href="/assets/tokens.css">
 *   (Load BEFORE your styles or inline <style> so cascade works.)
 *
 * Plan-specific tokens (--fs-*, --t-drag-*, --ts, --press-scale, --bg)
 * stay in plan/index.html — those are not canonical.
 */

:root {
  /* Colors */
  --c-black: #0a0a0a;
  --c-white: #ffffff;
  --c-white-45: rgba(255, 255, 255, 0.45);
  --c-white-50: rgba(255, 255, 255, 0.5);
  --c-white-55: rgba(255, 255, 255, 0.55);
  --c-white-72: rgba(255, 255, 255, 0.72);
  --c-white-0: rgba(255, 255, 255, 0);
  --c-gray-0: #f9f9f9;
  --c-gray-1: #f2f2f2;
  --c-gray-2: #ededed;
  --c-gray-3: #e4e4e4;
  --c-gray-4: #cbcbcb;
  --c-gray-5: #808080;
  --c-gray-6: #686868;
  --c-gray-7: #494949;
  /* Black alpha tints — used for shadows, overlays, scrim, and inset hairlines.
     Keep all rgba(10,10,10,X) usage funneled through these tokens. */
  --c-black-04: rgba(10, 10, 10, 0.04);
  --c-black-06: rgba(10, 10, 10, 0.06);
  --c-black-08: rgba(10, 10, 10, 0.08);
  --c-black-10: rgba(10, 10, 10, 0.10);
  --c-black-16: rgba(10, 10, 10, 0.16);
  --c-black-18: rgba(10, 10, 10, 0.18);
  --c-black-50: rgba(10, 10, 10, 0.5);
  /* Backdrop blur amount used by .nav frosted glass effect (and any future frosted surface) */
  --blur-nav: 18px;
  --c-red: #ff4040;
  --c-red-sub: #ffeaea;
  /* removed --c-red-deep — Figma source has only red + red_sub */
  --c-blue: #008cff;
  --c-blue-sub: #e3f2ff;
  --c-blue-deep: #0066c2;       /* AA-compliant text on --c-blue-sub */
  /* 2026-05-24 Figma palette 추가: green(성공) + orange(경고). */
  --c-green: #30CE00;
  --c-green-sub: #EDFBE9;
  --c-orange: #FEA500;
  --c-orange-sub: #FFF5E3;

  /* C4 audit (2026-05-25): semantic color aliases — plan과 공용. 모든 앱에서 동일 의미 토큰 사용.
     의도 코드 가독성: "color: var(--ink-2)" > "color: var(--c-gray-6)". */
  --bg:            var(--c-white);    /* page background (다크 모드에서 override) */
  --ink:           var(--c-black);    /* primary text */
  --ink-2:         var(--c-gray-6);   /* secondary text */
  --ink-3:         var(--c-gray-5);   /* tertiary */
  --ink-4:         var(--c-gray-4);   /* placeholder / disabled */
  /* meta — ink-3와 ink-4 사이. timeline axis label "30.SAT" 등 부가 정보용. */
  --ink-meta:      #a8a8a8;
  --hover-bg:      var(--c-gray-0);   /* hover surface (subtle) */
  --active-bg:     var(--c-gray-2);   /* active / pressed surface */
  --surface-sunken: var(--c-gray-0);  /* recessed background */
  --hairline:      var(--c-gray-2);   /* dividers */
  --hairline-2:    var(--c-gray-3);   /* control borders */

  /* Spacing */
  /* --pad-* = inner spacing (padding). --gap-* = layout spacing (gap, margin). Same values, different intent. */
  --pad-2: 2px;
  --pad-4: 4px;
  --pad-6: 6px;
  --pad-8: 8px;
  --pad-10: 10px;
  --pad-12: 12px;
  --pad-16: 16px;
  --pad-18: 18px;
  --pad-22: 22px;
  --pad-24: 24px;
  --pad-28: 28px;
  --pad-36: 36px;
  --pad-48: 48px;
  --pad-64: 64px;

  /* Mobile horizontal gutter — added 2026-05-24 per axiom A14.
     Use on body/main containers below the mobile breakpoint. */
  --pad-mobile-gutter: 18px;

  /* DS53 audit (2026-05-24): form/control height 표준 — single-line input·button.
     --form-h-lg = 44 (default), --form-h-md = 40 (compact tier: chip, secondary, sm). */
  /* DEPRECATED: --form-h-* 대신 --ctl-* 사용. 새 코드에서는 --ctl-xl (44) / --ctl-lg (40) 직접 참조. */
  --form-h-lg: var(--ctl-xl);
  --form-h-md: var(--ctl-lg);

  /* Deep audit (2026-05-24): --ff-info canonical 토큰 정의 (plan에만 있고 web에 누락이었음).
     정보성·코드 텍스트 (Pretendard Variable 우선). 5개 callsite (.field__input--mono 등). plan과 동일 정의. */
  --ff-info: "Pretendard Variable", "Pretendard", -apple-system, system-ui, sans-serif;

  /* C7 audit (2026-05-25): z-index 변수화 — 레이어 시스템 일관성.
     0/1/2는 로컬 stacking이라 raw 유지. */
  --z-popover: 50;
  --z-nav: 100;
  --z-tooltip: 110;
  --z-modal: 200;
  --z-snackbar: 1000;
  --z-loader: 9999;

  /* Font size scale */
  --fs-2xs: 9px;
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-md:  12px;
  --fs-base:13px;    /* meta/caption — 본문은 --fs-xl (16px) 사용 */
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 18px;
  --fs-3xl: 22px;
  --fs-4xl: 24px;
  /* Display scale — section/page heading용. 본문 token(--fs-xs ~ --fs-4xl)을 넘어가는
     반복 사용 사이즈만 토큰화. 1-off display(34/38/42/48/52/56/60/64)는 raw 유지. */
  --fs-5xl: 28px;
  --fs-6xl: 32px;
  --fs-7xl: 40px;

  /* Font weight scale */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Icon size scale */
  --icon-xs: 10px;
  --icon-sm: 12px;
  --icon-md: 14px;
  --icon-lg: 16px;

  /* Control height scale (button/input) — --form-h-lg/md 와 합쳐서 6단계 */
  --ctl-xs: 18px;   /* card check */
  --ctl-sm: 24px;   /* modal close */
  --ctl-md: 30px;   /* icon button */
  --ctl-lg: 40px;   /* primary buttons (= --form-h-md) */
  --ctl-xl: 44px;   /* primary input/CTA (= --form-h-lg, WCAG 2.5.5) */
  --ctl-2xl: 48px;  /* mobile primary CTA, auth input */

  /* Line-height scale */
  --lh-flat: 1.1;
  --lh-ctl: 22px;               /* button / input line-height */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.45;
  --lh-relaxed: 1.5;

  /* Letter-spacing (tracking) scale */
  --tracking-title: -0.02em;      /* large numerals, OTP input */
  --tracking-soft: -0.005em;      /* card title (subtle) */
  --tracking-snug: -0.01em;       /* sans titles, body emphasis */
  --tracking-tight: -0.03em;      /* buttons, labels */
  --tracking-hard: -0.04em;       /* headings, compact UI */
  --tracking-mono: 0.02em;        /* standard mono */
  --tracking-mono-wide: 0.04em;   /* spaced mono labels */
  --tracking-mono-caps: 0.06em;   /* uppercase mono eyebrow */

  /* Paragraph spacing — 글자 크기 비례 (정보성 문단 간격) */
  --paragraph-gap: 0.25em;

  /* ── Dialog base tokens ──
     모든 다이얼로그(modal, auth, editor, help, confirm) 공통 규격.
     커스텀은 개별 class에서 override. */
  --dialog-padding-x: var(--pad-22);
  --dialog-padding-y: var(--pad-22);
  --dialog-padding-bottom-btn: var(--pad-22);
  /* 모바일 다이얼로그 — bottom-sheet/일반 모두 동일 토큰 사용 (시스템 일관).
     ≤768 진입 시 :root에서 --dialog-padding-x를 --pad-18로 redefine. */
  --dialog-padding-bottom-mobile: calc(var(--pad-24) + env(safe-area-inset-bottom, 0px));
  --dialog-radius: var(--r-18);
  --dialog-close-size: var(--ctl-sm);     /* 24px hit area */
  --dialog-close-icon: var(--icon-md);    /* 14px X icon */
  --dialog-close-offset: calc((var(--dialog-close-size) - var(--dialog-close-icon)) / 2);
  --dialog-input-h: var(--ctl-2xl);       /* 48px */
  --btn-padding-x: 14px;                  /* 버튼 좌우 패딩 (확정) */
  --dialog-btn-h: var(--ctl-xl);          /* 44px */
  --dialog-btn-gap: var(--gap-12);        /* 버튼 간 간격 */
  --dialog-gap: var(--pad-24);            /* 섹션 간 간격 (헤드↔콘텐츠, 콘텐츠↔버튼 동일) */
  --dialog-head-gap: var(--gap-6);        /* 타이틀↔서브 */
  --dialog-title-size: var(--fs-3xl);     /* 22px */

  /* ── Keyboard hint chip (kbd) — 단축키 표시 chip.
     배경: c-gray-3에서 한단계 up (c-gray-4) — light에서 더 진하게 / dark에서
     더 밝게 자동 매핑되어 가독성 보장. */
  --kbd-bg:        var(--c-gray-4);
  --kbd-fg:        var(--ink);
  --kbd-height:    var(--ctl-md);          /* 30px (이전 ctl-sm 24px — 한단계 up) */
  --kbd-min-width: var(--ctl-md);          /* 30px 정사각형 기준 */
  --kbd-radius:    var(--r-6);
  --kbd-padding-x: var(--pad-10);
  --kbd-font-size: var(--fs-lg);           /* 14px (박스 30px와 비율 자연) */

  /* ── 2026-05-25 audit: blur / backdrop / modal 시스템화 ── */
  /* Blur scale — purpose-named (mobile edge·modal scrim·hero frost·nav). */
  --blur-edge: 4px;
  --blur-modal: 6px;
  --blur-frost: 8px;
  /* --blur-nav already defined above */

  /* Extra alpha tokens — close gaps surfaced in audit. */
  --c-black-03: rgba(10,10,10,0.03);
  --c-black-12: rgba(10,10,10,0.12);
  --c-white-12: rgba(255,255,255,0.12);
  --c-white-20: rgba(255,255,255,0.20);
  --c-white-85: rgba(255,255,255,0.85);

  /* Backdrop — 단일 scrim (2026-05-30). #0a0a0a 0.5, 라이트·다크 동일(모드 분기 없음).
     RULE: 색·투명도는 항상 이 한 칩. 특정 표면만 뒤에 blur 추가(blur만, 색/투명도 동일).
     현재 editor만 blur(--blur-modal), 사인인·confirm 등은 plain. */
  --backdrop: rgba(10,10,10,0.5);

  /* Modal width scale (sm/md/lg/xl). */
  --modal-w-sm: 360px;
  --modal-w-md: 440px;
  --modal-w-lg: 480px;
  --modal-w-xl: 1016px;
  --sh-modal: 0 4px 14px var(--c-black-04), 0 24px 60px var(--c-black-08);

  /* Interaction — hover/dim opacity 룰 통일. */
  --hover-color: rgba(10,10,10,0.04);       /* ::before overlay on light bg */
  --hover-color-inv: rgba(255,255,255,0.15); /* ::before overlay on dark bg */
  --hover-opacity: 0.92;       /* solid button dim */
  --hover-opacity-text: 0.7;   /* text link/brand dim */
  --dim-opacity: 0.3;          /* inactive/preview */

  --gap-2: 2px;
  --gap-4: 4px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-36: 36px;
  --gap-40: 40px;
  --gap-48: 48px;
  --gap-60: 60px;

  /* Radius — canonical Figma: 12/18/36/full. Extras (4/6/8) are utility-only
     for badges, icon-buttons, focus rings — not first-class brand radii. */
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-18: 18px;
  --r-36: 36px;
  --r-full: 1000px;

  /* Shadows — direct from Figma effects.
     `shadow_1` (#0a0a0a 0x0A ≈ 4%, offset 0/10, blur 24) — pill nav, modal */
  --sh-soft:  0 10px 24px var(--c-black-04);
  /* `shadow_2` (#0a0a0a 0x14 ≈ 8%, offset 0/10, blur 24) — popover, snackbar */
  --sh-soft2: 0 10px 24px var(--c-black-08);
  /* Figma `drop_shadow` for product cards (offset 0/10, blur 12, 4% — tighter) */
  --sh-card:  0 10px 12px var(--c-black-04);
  /* Hover lift — slightly bigger offset/blur for elevation cue */
  /* Hero outer shadow — large soft drop for "frame" feel */
  --sh-hero: 0 30px 60px var(--c-black-06), inset 0 0 0 1px var(--c-black-04);
  /* Hairline borders (inset 1px lines that read as borders without adding box dimensions) */
  --sh-hairline:        inset 0 0 0 1px var(--c-gray-3);
  --sh-hairline-soft:   inset 0 0 0 1px var(--c-gray-2);
  --sh-hairline-strong: inset 0 0 0 1px var(--c-black);
  /* Focus ring — 2px white halo + 2px black ring; high contrast against any bg */
  --sh-focus-ring: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-black);

  /* Layout */
  --content-w: 996px;
  --narrow-w: 505px;
  --hero-pad: 20px;
  /* Viewport-aware vertical padding — short laptops get less air, tall desktops keep 120 */
  --section-py: clamp(72px, 12vh, 120px);

  /* Typography (font-stack) */
  --ff-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback",
    "Pretendard Variable", "Pretendard",
    system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-eyebrow: "Gloria Hallelujah", "Plus Jakarta Sans", cursive;
  --ff-ja: "Noto Sans JP", "Plus Jakarta Sans", sans-serif;

  /* Easing / motion — Framer signature curves.
     abroo only ships --ease-out and --ease-out-sm. Bouncy / overshoot easings are
     intentionally absent: hovers are opacity dim, presses are scale 0.98, period. */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-sm:  cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:     220ms;
  --dur-base:     320ms;
  --dur-slow:     520ms;
  --dur-press:     80ms;

  /* ── Surface motion (2026-05-30) — 일시적 표면 단일 모션 시스템 ──
     menu·toolbar·confirm·backdrop·modal·popover 전부 이 한 쌍을 공유한다.
     백드롭(dim)은 콘텐츠와 *같은 값*으로 fade → 0→100 동시. 표면마다 미세하게
     다른 timing 금지 — 값은 여기 한 곳, 라이트/다크는 색만 다르다(타이밍 동일).
     RULE: @media (prefers-reduced-motion) 안에서 `*`/`*:not()` 유니버설 transition
     강제 금지 (전 요소 box-shadow/filter 전환 → 메인스레드 judder). 각 표면이
     자기 컴포지터 transition(opacity/transform)을 직접 가져 reduce-motion에도 부드럽게. */
  --surface-dur:  200ms;
  --surface-ease: var(--ease-out);

}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════════════════════════
   2026-05-25 Dark Mode — 시스템내 컬러 매핑만 (새 색 0).
   gray ladder 순서 swap + 4 accent sub 다크 톤 (사용자 지정).
   모든 앱이 이 토큰만 import해서 자동 다크 대응.
   ════════════════════════════════════════════════════════════ */
body[data-theme="dark"]{
  /* Surface ladder — light → dark swap.
     Notion/Slack/Linear 톤 참고: 페이지 bg (#0e0e0e) ↔ surface (--c-white = #1c) 14-unit 대비. */
  --bg:              #0e0e0e;
  --c-white:         #1c1c1c;
  --c-gray-0:        #232323;
  --c-gray-1:        #2a2a2a;
  --c-gray-2:        #333333;
  --c-gray-3:        #3d3d3d;
  --c-gray-4:        #5a5a5a;
  --c-gray-5:        #888;
  --c-gray-6:        #b0b0b0;
  --c-gray-7:        #d8d8d8;
  --c-black:         #f0f0f0;

  /* Accent main — 그대로. Accent sub — 다크 톤 (사용자 지정) */
  --c-red-sub:    #351E1A;
  --c-blue-sub:   #132D42;
  --c-green-sub:  #0E2D1F;
  --c-orange-sub: #36251C;

  /* ⚠️ CRITICAL: alias 명시 재선언 필수.
     CSS var()는 정의된 :root scope에서 substitute 됨 → --surface-sunken: var(--c-gray-0)가
     :root에서 #f9f9f9로 계산된 채 inherit되어 dark에서 light 색 안 바뀜 (bug).
     Dark 블록에서 다시 선언 → 여기서는 body의 새 --c-gray-0 (#232323) 참조함. */
  --ink:             var(--c-black);    /* primary text */
  --ink-2:           var(--c-gray-6);   /* secondary text */
  --ink-3:           var(--c-gray-5);   /* tertiary */
  --ink-4:           var(--c-gray-4);   /* placeholder / disabled */
  /* meta — ink-3와 ink-4 사이. dark: 5a5a5a보다 살짝 밝게. */
  --ink-meta:        #6e6e6e;
  /* kbd 다크 — c-gray-4가 다크에서 #5a5a5a로 매핑되어 자동으로 한단계 밝아짐.
     light c-gray-4(#cbcbcb)와 함께 시스템 전체에서 가독성 한단계 up. */
  --kbd-bg:          var(--c-gray-4);
  --kbd-fg:          var(--ink);
  --hover-bg:        var(--c-gray-1);   /* hover surface */
  --active-bg:       var(--c-gray-2);   /* active / pressed surface */
  --surface-sunken:  var(--c-gray-0);   /* recessed background */
  --hairline:        var(--c-gray-2);   /* dividers */
  --hairline-2:      var(--c-gray-3);   /* control borders */

  /* Shadow tokens — 다크에선 검정 그림자 약함, alpha 강화. sh-hairline 등 inset 1px도 재선언. */
  --sh-hairline:        inset 0 0 0 1px var(--c-gray-3);
  --sh-hairline-soft:   inset 0 0 0 1px var(--c-gray-2);
  --sh-hairline-strong: inset 0 0 0 1px var(--c-gray-7);
  --sh-focus-ring:      0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
  --sh-soft:            0 10px 24px rgba(0,0,0,0.5);
  --sh-soft2:           0 10px 24px rgba(0,0,0,0.6);
  --sh-card:            0 10px 12px rgba(0,0,0,0.45);
  --sh-modal:           0 4px 14px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.7);

  /* 다크모드 알파: 접미사(-04 등)는 라이트 기준. 다크에선 보정을 위해 더 진하게 설정됨. */
  /* Black alpha — shadow에 사용. 다크 배경에선 진하게 */
  --c-black-03: rgba(0,0,0,0.35);
  --c-black-04: rgba(0,0,0,0.4);
  --c-black-06: rgba(0,0,0,0.5);
  --c-black-08: rgba(0,0,0,0.6);
  --c-black-10: rgba(0,0,0,0.7);
  --c-black-16: rgba(0,0,0,0.8);
  --c-black-18: rgba(0,0,0,0.85);
  --c-black-50: rgba(0,0,0,0.85);

  /* White alpha (light scrim) → 다크에서도 어둡게 */
  --c-white-50: rgba(0,0,0,0.5);
  --c-white-85: rgba(0,0,0,0.7);
  --c-white-0: rgba(28,28,28,0);

  /* Hover — 다크모드 뒤집기 */
  --hover-color: rgba(255,255,255,0.08);
  --hover-color-inv: rgba(10,10,10,0.04);

  /* Backdrop — RULE: 단일 토큰(--backdrop), 라이트/다크만 값 분리(opacity만). 색은 검정 계열.
     이유: 라이트 rgba(10,10,10,0.5)는 흰 페이지에선 잘 보이지만 다크 #0e0e0e 위에선
     14→12로 거의 안 보임(검정 위 검정). 다크는 순검정 0.6으로 페이지를 더 눌러(14→5.6)
     모달(#1c1c1c)이 뜨게 한다. */
  --backdrop: rgba(0,0,0,0.6);

  color-scheme: dark;
}