/* Sunny Air — design tokens.
   Mirrors the Sunny Air design system (claude.ai/artifact/Kj4TdMC2da7m8ZYc9iv9QT),
   itself extracted from this file's own values. Edit a value HERE, never in style.css.

   The system has two colour themes, Boarding and Cabin. The product selects them with
   `.is-flying` selectors rather than a [data-theme] attribute, so the three tokens that
   differ are flattened to two names each: `--surface-panel` and `--surface-panel-cabin`. */

:root {

  /* ---- Colour ---- */

  --sky-top: #c4e0eb;
  --sky-bottom: #f1dfd2;
  --sky-night: #101e2c;

  --scrim-overlay: #101e2cd9;

  --mark-ground: #101e2c;
  --mark-sun: #e6d0aa;
  --mark-cloud: #a2c7b7;
  --mark-plane: #fff6e8;

  --surface-panel: #fff9efed;
  /* 같은 색의 불투명판. 고정된 제목줄처럼 패널 자신의 내용을 가려야 하는 곳에 쓴다. */
  --surface-panel-solid: #fff9ef;
  --surface-panel-cabin: #f0e8d9ef;
  --surface-panel-line: #fffdf3;
  --surface-panel-line-cabin: #d6c6ac;
  --surface-announcement: #fff9efe8;
  --surface-announcement-cabin: #e9dfcfee;
  --surface-dialog: #fff6e8;
  --surface-sheet: #eee3d1;
  --surface-sheet-line: #b9a78b;
  --surface-raised: #f8f0e2;
  --surface-raised-line: #c8bca8;
  --surface-sunken: #ebe2d2;
  --surface-sunken-line: #c9b9a3;
  --surface-group: #f3efe7;
  --surface-group-line: #e3dccd;
  --surface-group-crew: #eef1f4;
  --surface-group-crew-line: #d6dde4;
  --surface-rest: #e8eee9;
  --surface-menu: #fbf4e6;
  --surface-menu-line: #d9c6a5;
  --surface-menu-first: #fdf8ee;
  --surface-float: #f3ece0c4;
  --surface-float-line: #fffaf0a8;
  --surface-icon: #fff9efeb;
  --surface-icon-line: #fffdf8;
  --surface-brand-mark: #fff6e9;
  --surface-ticket: #f2e6cc;
  --surface-passport: #344e59;
  --surface-notice: #fff4dd;

  --ink: #42516b;
  --ink-strong: #425775;
  --ink-title: #465975;
  --ink-body: #55657f;
  --ink-muted: #566680;
  --ink-soft: #5e7188;
  --ink-meta: #62748a;
  --ink-float: #4f6176;
  --ink-control: #546a83;
  --ink-label: #53647e;
  --ink-kbd: #5f6d84;
  --ink-brand: #405771;
  --ink-brand-sub: #637992;
  --ink-notice: #55677d;
  --ink-traveller: #284e56;
  --ink-on-accent: #fffdf6;
  --ink-on-dark: #eee3cc;
  --ink-hint-cabin: #e0d7c7;

  --accent: #647b88;
  --accent-action: #718e97;
  --accent-action-line: #86a0a7;
  --accent-action-hover: #7d9ca3;
  --accent-solid: #7e98a1;
  --accent-action-shadow: #536f7a;
  --accent-seat: #718f96;
  --accent-sage: #688a87;
  --accent-sage-line: #9abdb0;
  --accent-blossom: #be9bb7;
  --accent-lavender: #8b91b5;
  --accent-lavender-wash: #f1e7f6;
  --accent-lavender-line: #c8bedc;
  --accent-mint: #769b99;

  --state-live: #6a9b85;
  --state-connected: #517f70;
  --state-connected-cabin: #426b5e;
  --state-selected: #dcece7;
  --state-selected-line: #94b8a8;
  --state-available: #e4efe5;
  --state-available-line: #b9d2be;
  --state-suggested: #ebe0cb;
  --state-suggested-line: #cdb994;
  --state-pressed-rest: #d2e3da;
  --state-pressed-rest-line: #8cae9c;
  --state-kit-on: #d6e0d3;
  --state-kit-on-line: #718e7c;
  --state-belt: #fff0d9f2;
  --state-belt-line: #d9b476;
  --state-belt-ink: #aa7b4b;
  --state-off: #ece6dcf0;
  --state-off-line: #d9d0c2;
  --state-off-ink: #8a94a3;
  --state-off-slash: #b3665c;
  --state-mute: #f3e3df;
  --state-mute-line: #d9b5ae;
  --state-mute-ink: #7a4f48;

  --focus-ring: #8fb0b8;
  --focus-ring-dialog: #647b88;

  --hint-cabin-bg: #26363cdd;
  --hint-boarding-bg: #fff7e9de;
  --hint-boarding-ink: #4a627a;

  --rest-veil: #050a12;
  --rest-hint-bg: #10192699;
  --rest-ink: #eef1f4;
  --rest-ended-ink: #d9dfe6;
  --rest-ended-body: #aab4bf;

  --boarding-card-top: #152b35ed;
  --boarding-card-bottom: #223c46d4;
  --boarding-card-line: #d3dfd233;
  --boarding-heading: #fff4de;
  --boarding-eyebrow: #b9cbbf;
  --boarding-body: #cfdbd8;

  --crew-jacket: #182b46;
  --crew-lapel: #30445e;
  --crew-scarf: #b74f66;
  --crew-button-gold: #d9b872;

  --kit-pillow-economy: #bca58c;
  --kit-mask-economy: #8298ac;
  --kit-pillow-business: #849f98;
  --kit-mask-business: #48665f;
  --kit-pillow-first: #dac8a4;
  --kit-mask-first: #a48a60;
  --kit-blanket: #d9c6a5;
  --kit-blanket-trim: #ad8d58;

  --tag-bg: #e5ebdf;
  --tag-ink: #5e7c74;
  --tag-line: #cbd9cc;

  --ink-sheet: #384e56;
  --ink-sheet-note: #545d57;
  --ink-sheet-state: #4d6356;
  --ink-menu-label: #8a6c58;

  --ticket-ink: #253e49;
  --ticket-ink-body: #596967;
  --ticket-ink-meta: #63757a;
  --ticket-ink-eyebrow: #64736e;
  --ticket-ink-stub: #55675f;
  --ticket-line: #314b5325;

  --line-control: #adbdc755;
  --line-hairline: #7e91aa33;
  --line-dashed: #9bafbe66;
  --line-scene-label: #839ba688;

  /* ---- Type ---- */
  --font-sans: 'DM Sans', 'Noto Sans KR', sans-serif;
  /* the three sizes style.css reads directly; they mirror the caption / body-xs / micro styles */
  --text-caption: 11px;   /* smallest informative text */
  --text-body: 12px;
  --text-label-min: 10px; /* decorative uppercase labels only */

  /* ---- Spacing ---- */
  --space-0\.5: 2px;
  --space-1: 4px;
  --space-1\.5: 6px;
  --space-2: 8px;
  --space-2\.5: 10px;
  --space-3: 12px;
  --space-3\.5: 14px;
  --space-4: 16px;
  --space-4\.5: 18px;
  --space-5: 22px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 36px;
  --edge-desktop: 24px;
  --edge-mobile: 12px;
  --edge-page: 4.5%;
  --control-touch: 44px;
  --control-compact: 40px;
  --control-small: 36px;
  --action-tall: 78px;
  --action-cabin: 60px;
  --panel-journey: 248px;
  --panel-sound: 300px;
  --panel-announcement: 490px;
  --dialog-max: 480px;
  --sheet-max: 440px;
  --ticket-max: 370px;
  --stick-size: 112px;

  /* ---- Radius ---- */
  --radius-pill: 999px;
  --radius-round: 50%;
  --radius-card-lg: 32px;
  --radius-dialog: 26px;
  --radius-panel: 22px;
  --radius-sheet: 20px;
  --radius-control: 18px;
  --radius-card: 16px;
  --radius-chip: 13px;
  --radius-tight: 12px;
  --radius-sm: 8px;

  /* ---- Shadow ---- */
  --shadow-panel: 0 10px 35px #5d75981a, inset 0 1px #ffffff;
  --shadow-panel-cabin: 0 8px 28px #0c192534;
  --shadow-float: 0 4px 16px #0c19252e;
  --shadow-icon: 0 4px 12px #6b789b14;
  --shadow-action: 0 5px 0 #536f7a, 0 12px 25px #617e9220;
  --shadow-action-pressed: 0 2px 0 #536f7a;
  --shadow-dialog: 0 20px 70px #111c2940;
  --shadow-env: 0 20px 60px #07131c66;
  --shadow-toast: 0 10px 30px #5e789433;
  --shadow-prop: 0 5px 12px #06182250;
  --shadow-focus: 0 0 0 5px #fff6e855;

  /* ---- Opacity ---- */
  --opacity-disabled: 0.5;
  --opacity-action-off: 0.3;
  --opacity-wait: 0.6;
  --opacity-float: 0.85;
  --opacity-grain: 0.018;

  /* ---- Z index ---- */
  --z-boarding: 2;
  --z-topbar: 3;
  --z-panel: 5;
  --z-hint: 6;
  --z-announcement: 7;
  --z-translation: 8;
  --z-notice: 9;
  --z-toast: 10;
  --z-overlay: 20;

  /* ---- Blur ---- */
  --blur-panel: 20px;
  --blur-backdrop: 10px;
  --blur-stick: 8px;
  --blur-boarding: 5px;
}