/* Two visual bases with the fixed TAAK orange accent. Existing semantic names
   remain aliases so scoped components share the same source of truth. */
:root {
    color-scheme: dark;
    --color-background: #12100f;
    --color-page: var(--color-surface);
    --color-background-deep: #080706;
    --color-surface: #1c1917;
    --color-surface-secondary: #28231f;
    --color-text-primary: #fff8f2;
    --color-text-secondary: #c9bbb0;
    --color-border: #463a33;
    --color-border-control: #8d776b;
    --color-success: #86c49a;
    --color-success-strong: #a7d8b6;
    --color-success-soft: #1d3025;
    --color-warning: #f2b45f;
    --color-warning-soft: #382915;
    --color-danger: #ff5a45;
    --color-danger-soft: #3b211c;
    --color-danger-fill: #c83b2b;
    --color-danger-highlight: #ce4030;
    --color-danger-pressed: #b52d25;
    --color-danger-contrast: #fff8f2;
    --gradient-danger: linear-gradient(145deg, var(--color-danger-highlight), var(--color-danger-fill) 45%, var(--color-danger-pressed));
    --gradient-danger-hover: linear-gradient(145deg, var(--color-danger-highlight), var(--color-danger-fill));
    --gradient-danger-pressed: linear-gradient(145deg, var(--color-danger-fill), var(--color-danger-pressed));
    --color-info: #8ebcff;
    --color-info-soft: #172b48;
    --color-on-strong: #12100f;
    --color-overlay: rgba(0, 0, 0, .68);
    --color-sheen: rgba(255, 248, 242, .1);
    --color-disabled: #a99a90;
    --color-disabled-background: #38312c;
    --color-success-ring: color-mix(in srgb, var(--color-success) 46%, transparent);
    --color-success-ring-clear: color-mix(in srgb, var(--color-success) 0%, transparent);
    --color-danger-ring: color-mix(in srgb, var(--color-danger) 52%, transparent);
    --color-danger-ring-clear: color-mix(in srgb, var(--color-danger) 0%, transparent);

    /* Photo scrims and cartography keep their own readable contrast pair. */
    --color-image-background: #12100f;
    --color-image-surface: #1c1917;
    --color-image-surface-secondary: #28231f;
    --color-on-image: #fff8f2;
    --color-on-image-secondary: #dfd4ca;
    --color-image-border: #8d776b;
    --color-image-success: #a7d8b6;
    --color-image-success-soft: #1d3025;
    --color-image-warning: #f2b45f;
    --color-image-warning-soft: #382915;
    --color-map-surface: #ffffff;
    --color-map-text: #222222;
    --color-map-link: #00558a;
    --color-map-pin-detail: #ffffff;
    --shadow-map-pin: 0 2px 3px #0006;
    --palette-orange-fill: #ff7a3d;
    --palette-orange-hover: #ff8a54;
    --palette-orange-pressed: #f06b2b;
    --palette-orange-text: #ff9a6c;
    --palette-orange-soft: #3a2017;
    --palette-orange-contrast: #1a0d08;
    --color-accent: var(--palette-orange-fill);
    --color-accent-hover: var(--palette-orange-hover);
    --color-accent-pressed: var(--palette-orange-pressed);
    --color-accent-text: var(--palette-orange-text);
    --color-accent-soft: var(--palette-orange-soft);
    --color-accent-contrast: var(--palette-orange-contrast);
    --color-accent-on-image: #ff9a6c;
    --color-primary: var(--color-accent);
    --color-primary-deep: var(--color-accent-hover);
    --color-primary-strong: var(--color-accent-text);
    --color-primary-soft: var(--color-accent-soft);
    --color-on-primary: var(--color-accent-contrast);
    --color-focus-ring: var(--color-accent-text);
    --color-terracotta: var(--color-accent-text);
    --color-brand-dark: var(--color-surface-secondary);
    --color-on-brand: var(--color-text-primary);
    --color-on-brand-muted: var(--color-text-secondary);

    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    --touch-target-min: 44px;
    --control-height: 48px;
    --action-height: 52px;
    --content-gutter: var(--space-3);

    --radius-input: 14px;
    --radius-card: 20px;
    --radius-button: 16px;
    --radius-hero-action: 22px;
    --radius-dialog: 24px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.22);
    --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.24);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.42);
    --shadow-accent: 0 6px 18px color-mix(in srgb, var(--color-accent) 24%, transparent);
    --shadow-primary: 0 7px 20px color-mix(in srgb, var(--color-accent) 30%, transparent);

    --gradient-hero: linear-gradient(145deg, var(--color-surface) 0%, var(--color-surface-secondary) 100%);
    --gradient-success: linear-gradient(145deg, var(--color-surface) 0%, var(--color-success-soft) 100%);
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-display: 32px;

    --icon-control-size: 44px;
    --icon-compact-size: 38px;
    --icon-small-size: 32px;

    --line-tight: 1.2;
    --line-body: 1.5;

    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 420ms;
    --motion-impact: 180ms;
    --motion-journey: 1550ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
    --ease-launch: cubic-bezier(0.22, 0.72, 0.2, 1);
    --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-cruise: cubic-bezier(0.38, 0.08, 0.24, 1);
    --ease-spring: var(--ease-arrive);

    --content-mobile: 100%;
    --content-tablet: 760px;
    --content-desktop: 1040px;

    --media-hero-ratio-mobile: 4 / 3;
    --media-hero-ratio-wide: 16 / 8;
    --media-home-hero-ratio-mobile: 15 / 16;
    --media-home-hero-ratio-compact: 6 / 5;
    --media-home-hero-ratio-wide: 16 / 10;

    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    --sticky-action-bar-bottom-offset: 0px;
    --sticky-action-bar-content-clearance: 124px;
    --create-sticky-action-content-clearance: 168px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --color-background: #f7f5f2;
    --color-page: var(--color-background);
    --color-background-deep: #f0ede8;
    --color-surface: #ffffff;
    --color-surface-secondary: #f0ede8;
    --color-border: #ddd8d1;
    --color-border-control: #82796f;
    --color-text-primary: #211e1b;
    --color-text-secondary: #6d6761;
    --color-success: #24653a;
    --color-success-strong: #205c35;
    --color-success-soft: #e6f2e9;
    --color-warning: #805000;
    --color-warning-soft: #fff0d5;
    --color-danger: #b52d25;
    --color-danger-soft: #fbe9e5;
    --color-info: #1d4ed8;
    --color-info-soft: #eaf0ff;
    --color-on-strong: #ffffff;
    --color-disabled: #736b63;
    --color-disabled-background: #e4dfd8;
    --color-sheen: rgba(33, 30, 27, .05);
    --shadow-card: 0 1px 2px rgba(33, 30, 27, .04), 0 5px 18px rgba(33, 30, 27, .06);
    --shadow-hover: 0 8px 24px rgba(33, 30, 27, .10);
    --shadow-elevated: 0 12px 32px rgba(33, 30, 27, .16);
    --palette-orange-fill: #ff7a3d;
    --palette-orange-hover: #f36b2b;
    --palette-orange-pressed: #e95e1b;
    --palette-orange-text: #9c360c;
    --palette-orange-soft: #ffede3;
    --palette-orange-contrast: #1a0d08;
}