@import './foundation.css';
/* Worflogy Design System 1.3. Change semantic tokens here first. */
:root {
  --color-coral: var(--worf-foundation-color-f16c5b);
  --color-sky: var(--worf-foundation-color-58b4df);
  --color-butter: var(--worf-foundation-color-f2ce75);
  --color-white: var(--worf-foundation-color-ffffff);
  --color-charcoal: var(--worf-foundation-color-252a34);
  --color-bone: var(--worf-foundation-color-fafbfd);
  --color-surface: var(--color-bone);
  /* Quiet studio atmosphere outside the interactive canvas. */
  --studio-wash-sky: var(--worf-foundation-color-58b4df4d);
  --studio-wash-coral: var(--worf-foundation-color-f16c5b29);
  --studio-wash-butter: var(--worf-foundation-color-f2ce7552);
  --studio-page-background: radial-gradient(ellipse at 0% 4%, var(--studio-wash-sky), transparent 54%), radial-gradient(ellipse at 100% 35%, var(--studio-wash-butter), transparent 49%), radial-gradient(ellipse at 8% 100%, var(--studio-wash-coral), transparent 50%);
  --studio-world-art: url("../assets/images/brand/studio-world.svg");
  --studio-world-opacity: .65;
  --color-surface-subtle: var(--worf-foundation-color-edf5fa);
  --color-surface-hover: var(--worf-foundation-color-e1eff7);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--worf-foundation-color-556575);
  --color-text-brand: var(--worf-foundation-color-a7352c);
  --color-border: var(--worf-foundation-color-ccdce6);
  --color-border-input: var(--worf-foundation-color-849aaa);
  --color-action: var(--worf-foundation-color-ba4034);
  --color-action-hover: var(--worf-foundation-color-9d3027);
  --color-on-action: var(--color-white);
  --color-success: var(--worf-foundation-color-365c70);
  --color-success-surface: var(--worf-foundation-color-e4f1f7);
  --color-warning: var(--worf-foundation-color-79591d);
  --color-warning-surface: var(--worf-foundation-color-fbf1d4);
  --color-danger: var(--worf-foundation-color-a32d3e);
  --color-danger-surface: var(--worf-foundation-color-fbe9ed);
  --color-overlay: var(--worf-foundation-color-rgba-37-42-52-48);
  --color-caption-surface: var(--worf-foundation-color-rgba-255-255-255-97);
  /* Glass cards: bounded surfaces over photography/video, never whole-page opacity. */
  --glass-card-teal-surface: linear-gradient(135deg,var(--worf-foundation-color-rgba-15-60-58-42),var(--worf-foundation-color-rgba-8-35-40-38) 55%,var(--worf-foundation-color-rgba-27-91-78-46));
  --glass-card-teal-solid: var(--worf-foundation-color-153d3b);
  --glass-card-teal-border: var(--worf-foundation-color-8debd25c);
  --glass-card-slate-surface: linear-gradient(135deg,var(--worf-foundation-color-rgba-42-54-82-42),var(--worf-foundation-color-rgba-16-36-52-38));
  --glass-card-slate-solid: var(--worf-foundation-color-26364b);
  --glass-card-slate-border: var(--worf-foundation-color-b5bcff40);
  --color-on-glass: var(--color-white);
  --color-on-media: var(--color-white);
  --media-text-stroke: .5px var(--color-charcoal);
  --shadow-media-text: 0 1px 2px var(--color-charcoal), 0 2px 8px var(--color-charcoal);
  --glass-card-blur: 8px;
  --glass-card-shadow: inset 0 0 32px var(--worf-foundation-color-94ffe508), 0 25px 55px var(--worf-foundation-color-00000044);
  --glass-card-focus-ring: 2px solid var(--color-on-glass);
  /* Shared canvas roles, consumed by canvas-theme.js. */
  --scene-background: var(--color-surface);
  --scene-plane: var(--worf-foundation-color-e6f0f7);
  --scene-plane-secondary: var(--worf-foundation-color-f1f7fb);
  --scene-plane-result: var(--worf-foundation-color-faf1d9);
  --scene-grid: var(--worf-foundation-color-cedfe9);
  --scene-border: var(--worf-foundation-color-9bb6c8);
  --scene-link: var(--worf-foundation-color-66859c);
  --scene-active: var(--worf-foundation-color-bc4034);
  --scene-flow: var(--worf-foundation-color-986b20);
  --scene-ink: var(--worf-foundation-color-344559);
  --scene-dark: var(--worf-foundation-color-964c42);
  --scene-accent: var(--color-coral);
  --scene-highlight: var(--worf-foundation-color-ffb8a7);
  --scene-pale: var(--color-surface-subtle);
  --scene-secondary: var(--color-sky);
  --scene-secondary-dark: var(--worf-foundation-color-357a9d);
  --scene-secondary-light: var(--worf-foundation-color-ceeafa);
  --scene-gold: var(--worf-foundation-color-dcaf48);
  --scene-cream: var(--worf-foundation-color-fff0be);
  --scene-paper: var(--color-white);
  --scene-edge: var(--worf-foundation-color-a9bfcb);
  --scene-white: var(--color-white);
  --scene-shadow: var(--worf-foundation-color-425f75);
  --scene-skin: var(--worf-foundation-color-e3c8a4);
  --scene-tile-side: var(--worf-foundation-color-c6dce9);
  --scene-tile-front: var(--worf-foundation-color-9fbdd0);
  --scene-tile-selected: var(--worf-foundation-color-ffe2d6);
  --scene-tile: var(--color-white);
  --font-sans-ko: "Upright Quotes", Pretendard, "Malgun Gothic", system-ui, sans-serif;
  --font-sans-en: var(--font-sans-ko);
  --font-body: var(--font-sans-ko);
  --font-display-ko: "Upright Quotes", SUITE, Pretendard, sans-serif;
  --font-display-en: "Upright Quotes", "Space Grotesk", SUITE, Pretendard, sans-serif;
  --font-display: var(--font-display-ko);
  --font-code: "Upright Quotes Mono", Consolas, monospace;
  --font-size-xs: var(--worf-foundation-type-12px);
  --font-size-sm: var(--worf-foundation-type-13px);
  --font-size-ui: var(--worf-foundation-type-14px);
  --font-size-body: var(--worf-foundation-type-16px);
  --font-size-reading: var(--worf-foundation-type-17px);
  --font-size-lead: var(--worf-foundation-type-18px);
  --font-size-heading: var(--worf-foundation-type-24px);
  --font-size-title: var(--worf-foundation-type-32px);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.4;
  --line-height-body: 1.75;
  --line-height-reading: 1.85;
  --space-1: var(--worf-foundation-space-4px);
  --space-2: var(--worf-foundation-space-8px);
  --space-3: var(--worf-foundation-space-12px);
  --space-4: var(--worf-foundation-space-16px);
  --space-5: var(--worf-foundation-space-20px);
  --space-6: var(--worf-foundation-space-24px);
  --space-8: var(--worf-foundation-space-32px);
  --space-10: var(--worf-foundation-space-40px);
  --space-12: var(--worf-foundation-space-48px);
  --space-16: var(--worf-foundation-space-64px);
  --radius-control: var(--worf-foundation-radius-4px);
  --radius-card: var(--worf-foundation-radius-6px);
  --radius-dialog: var(--worf-foundation-radius-10px);
  --dialog-shadow: 0 24px 80px var(--worf-foundation-color-252a3433), 0 4px 16px var(--worf-foundation-color-425f7514);
  --dialog-header-background: linear-gradient(115deg, var(--worf-foundation-color-edf5fa), var(--worf-foundation-color-fafbfd) 60%, var(--worf-foundation-color-fbf1d4));
  --dialog-accent: linear-gradient(90deg, var(--color-coral) 0 38%, var(--color-butter) 38% 65%, var(--color-sky) 65%);
  --radius-pill: var(--worf-foundation-radius-999px);
  --shadow-diagram: 0 8px 28px var(--worf-foundation-color-425f7508);
  --diagram-label-width: 200px;
  --diagram-label-min-width: 170px;
  --diagram-label-font-size: var(--font-size-reading);
  --diagram-label-min-font-size: var(--font-size-ui);
  /* Route spacing in the diagram's unscaled coordinate system. */
  --diagram-route-diagnosis-inset: 50;
  --diagram-route-context-gap: 110;
  --diagram-route-context-outset: 140;
  --diagram-route-learning-gap: 150;
  --diagram-route-infrastructure-gap: 80;
  --motion-canvas-ease: Sine.easeInOut;
  --motion-story-flow-duration: 700ms;
  --motion-story-stagger-duration: 100ms;
  --motion-story-response-duration: 1400ms;
  --motion-story-ease: var(--motion-canvas-ease);
  --motion-overview-flow-duration: 1000ms;
  --motion-overview-feedback-duration: 1800ms;
  /* Phaser easing identifier, consumed by canvas-theme.js. */
  --motion-overview-ease: var(--motion-canvas-ease);
  --duration-preview: 450ms;
  --shadow-control: 0 2px 8px var(--worf-foundation-color-20201e12);
  --shadow-floating: 0 4px 16px var(--worf-foundation-color-20201e26);
  --shadow-caption: 0 2px 14px var(--worf-foundation-color-20201e0a);
  --focus-ring: 2px solid var(--color-action);
  --focus-offset: 3px;
  --control-height: 40px;
  --control-height-touch: 44px;
  --content-width: 1320px;
  --page-gutter: var(--space-10);
  --floating-rail-width: 120px;
  --floating-panel-gap: var(--space-4);
  --floating-gap: var(--space-2);
  --floating-inset: var(--space-6);
  --z-caption: 2;
  --z-canvas-controls: 3;
  --z-floating: 5;
  --z-skip: 10;
  --duration-fast: 120ms;
  --ease-standard: ease-out;
  /* Compatibility aliases for the existing homepage. */
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --paper: var(--color-surface);
  --canvas: var(--scene-background);
  --accent: var(--color-action);
}
@media(max-width:760px) {
  :root { --page-gutter: 18px; --floating-inset: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  :root { --duration-fast: 0ms; }
}

/* Shared homepage UI metrics; keep geometry and typography roles separate. */
:root {
  --ui-space-negative-80px: -80px;
  --ui-size-78px: 78px;
  --ui-stroke-1px: 1px;
  --ui-tracking-negative-1px: -1px;
  --ui-size-146px: 146px;
  --ui-tracking-0point-4px: 0.4px;
  --ui-tracking-negative-0point-5px: -0.5px;
  --ui-size-900px: 900px;
  --ui-size-35px: 35px;
  --ui-size-54px: 54px;
  --ui-size-48px: 48px;
  --ui-size-20px: 20px;
  --ui-size-620px: 620px;
  --ui-size-89px: 89px;
  --ui-size-62px: 62px;
  --ui-size-66px: 66px;
  --ui-size-155px: 155px;
  --ui-size-28px: 28px;
  --ui-size-470px: 470px;
  --ui-leading-1point-9: 1.9;
  --ui-size-32px: 32px;
  --ui-size-360px: 360px;
  --ui-leading-1point-55: 1.55;
  --ui-size-760px: 760px;
  --ui-tracking-1point-4px: 1.4px;
  --ui-leading-1point-5: 1.5;
  --ui-size-30px: 30px;
  --ui-leading-1point-6: 1.6;
  --ui-size-480px: 480px;
  --ui-leading-1: 1;
  --ui-size-100px: 100px;
  --ui-size-140px: 140px;
  --ui-size-860px: 860px;
  --ui-size-40px: 40px;
  --ui-leading-1point-85: 1.85;
  --ui-size-90px: 90px;
  --ui-leading-1point-65: 1.65;
  --ui-tracking-negative-0point-2px: -0.2px;
  --ui-size-44px: 44px;
  --ui-leading-1point-45: 1.45;
  --ui-size-170px: 170px;
  --ui-tracking-negative-0point-02em: -0.02em;
  --ui-stroke-3px: 3px;
  --ui-size-1px: 1px;
  --ui-stroke-2px: 2px;
  --ui-tracking-negative-0point-025em: -0.025em;
  --ui-leading-1point-8: 1.8;
  --ui-tracking-negative-0point-01em: -0.01em;
  --ui-tracking-0point-04em: 0.04em;
  --ui-leading-1point-7: 1.7;
  --ui-tracking-negative-0point-015em: -0.015em;
  --ui-leading-1point-3: 1.3;
  --ui-size-208px: 208px;
  --ui-size-1400px: 1400px;
  --ui-size-80px: 80px;
  --ui-size-180px: 180px;
  --ui-size-88px: 88px;
  --ui-size-4px: 4px;
  --ui-size-72px: 72px;
  --ui-size-3px: 3px;
  --ui-size-520px: 520px;
  --ui-size-1180px: 1180px;
  --ui-size-64px: 64px;
  --ui-leading-0: 0;
  --ui-size-16px: 16px;
  --ui-size-60px: 60px;
  --ui-size-24px: 24px;
  --ui-size-6px: 6px;
  --ui-size-112px: 112px;
  --ui-size-76px: 76px;
  --ui-size-56px: 56px;
  --ui-tracking-0point-08em: 0.08em;
  --ui-size-820px: 820px;
  --ui-size-1320px: 1320px;
  --ui-tracking-1point-5px: 1.5px;
  --ui-size-720px: 720px;
  --ui-size-320px: 320px;
  --ui-size-220px: 220px;
}

/* Component-specific decorative shadows (shared identical values). */
:root {
  --home-text-shadow-detail-1: 0 1px 1px var(--color-surface);
  --home-box-shadow-detail-2: inset 3px 0 var(--color-coral);
  --home-box-shadow-detail-3: 0 0 0 2px var(--color-sky);
}

/* Layout tracks, offsets and decorative pattern metrics. */
:root {
  --ui-size-145px: 145px;
  --ui-size-105px: 105px;
  --ui-size-1240px: 1240px;
  --ui-size-160px: 160px;
  --ui-space-negative-4px: -4px;
  --ui-size-200px: 200px;
}