/*
  CityBites canonical runtime tokens.
  New CSS should define tokens here, then consume these variables from base,
  layout, component, or pattern files. Legacy aliases remain for migration.
*/

:root {
    color-scheme: light;

    /* Typography */
    --cb-font-sans: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --cb-font-heading: "Lexend", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --cb-font-display: var(--cb-font-heading);
    --cb-font-mono: "Cascadia Code", Consolas, "Courier New", monospace;

    --cb-font-weight-regular: 400;
    --cb-font-weight-medium: 500;
    --cb-font-weight-semibold: 600;
    --cb-font-weight-bold: 700;
    --cb-font-weight-extrabold: 800;

    --cb-step--1: 0.875rem;
    --cb-step-0: 1rem;
    --cb-step-1: 1.125rem;
    --cb-step-2: 1.25rem;
    --cb-step-3: 1.5rem;
    --cb-step-4: 1.875rem;

    --cb-text-xs: 0.75rem;
    --cb-text-sm: 0.875rem;
    --cb-text-md: 1rem;
    --cb-text-lg: 1.125rem;
    --cb-text-xl: 1.25rem;
    --cb-text-2xl: 1.5rem;
    --cb-text-3xl: 1.875rem;

    --cb-line-tight: 1.15;
    --cb-line-heading: 1.2;
    --cb-line-body: 1.55;

    /* Core palette from Figma plus validated runtime public accents */
    --cb-color-orange-50: #fff7ed;
    --cb-color-orange-100: #ffedd5;
    --cb-color-orange-200: #fed7aa;
    --cb-color-orange-500: #f97316;
    --cb-color-orange-600: #ea580c;
    --cb-color-orange-700: #c2410c;
    --cb-color-orange-800: #9a3412;

    --cb-color-stone-50: #fafaf9;
    --cb-color-stone-100: #f5f5f4;
    --cb-color-stone-200: #e7e5e4;
    --cb-color-stone-300: #d6d3d1;
    --cb-color-stone-500: #78716c;
    --cb-color-stone-700: #44403c;
    --cb-color-stone-900: #1c1917;

    --cb-color-white: #ffffff;
    --cb-color-black: #000000;

    --cb-color-success-50: #dcfce7;
    --cb-color-success-600: #16a34a;
    --cb-color-success-800: #166534;
    --cb-color-warning-50: #fef3c7;
    --cb-color-warning-500: #f59e0b;
    --cb-color-warning-800: #854d0e;
    --cb-color-danger-50: #fee2e2;
    --cb-color-danger-600: #dc2626;
    --cb-color-danger-800: #991b1b;
    --cb-color-info-50: #dbeafe;
    --cb-color-info-500: #3b82f6;
    --cb-color-info-800: #1e40af;
    --cb-color-neutral-50: #f3f4f6;
    --cb-color-neutral-800: #1f2937;

    /* Public brand aliases from the public brand starter */
    --cb-brand-ink-900: #0f1724;
    --cb-brand-ink-700: #5f6b7a;
    --cb-brand-sand-050: var(--cb-color-white);
    --cb-brand-sand-100: var(--cb-color-white);
    --cb-brand-sand-200: #f5f5f5;
    --cb-brand-clay-500: #ff640f;
    --cb-brand-clay-700: #db4f00;
    --cb-brand-forest-600: #2e7d68;
    --cb-brand-amber-600: #b7741a;

    /* Semantic surfaces and text */
    --cb-surface-page: var(--cb-color-stone-50);
    --cb-surface-card: var(--cb-color-white);
    --cb-surface-raised: var(--cb-color-white);
    --cb-surface-muted: var(--cb-color-stone-100);
    --cb-surface-accent: var(--cb-color-orange-50);
    --cb-surface-inverse: var(--cb-color-stone-900);
    --cb-surface-scrim: rgba(28, 25, 23, 0.48);

    --cb-text-primary: var(--cb-color-stone-900);
    --cb-text-secondary: var(--cb-color-stone-700);
    --cb-text-muted: var(--cb-color-stone-500);
    --cb-text-inverse: var(--cb-color-white);
    --cb-text-action: var(--cb-color-orange-800);
    --cb-text-danger: var(--cb-color-danger-600);
    --cb-text-success: var(--cb-color-success-800);
    --cb-text-warning: var(--cb-color-warning-800);
    --cb-text-info: var(--cb-color-info-800);

    --cb-border-subtle: var(--cb-color-stone-100);
    --cb-border-default: var(--cb-color-stone-200);
    --cb-border-strong: var(--cb-color-stone-300);
    --cb-border-focus: var(--cb-color-orange-600);
    --cb-border-danger: var(--cb-color-danger-600);

    --cb-action-primary: var(--cb-color-orange-600);
    --cb-action-primary-hover: var(--cb-color-orange-700);
    --cb-action-primary-soft: var(--cb-color-orange-50);
    --cb-action-primary-text: var(--cb-color-white);
    --cb-action-danger: var(--cb-color-danger-600);
    --cb-action-danger-hover: var(--cb-color-danger-800);
    --cb-action-danger-soft: var(--cb-color-danger-50);

    --cb-status-success: var(--cb-color-success-600);
    --cb-status-success-bg: var(--cb-color-success-50);
    --cb-status-success-text: var(--cb-color-success-800);
    --cb-status-warning: var(--cb-color-warning-500);
    --cb-status-warning-bg: var(--cb-color-warning-50);
    --cb-status-warning-text: var(--cb-color-warning-800);
    --cb-status-danger: var(--cb-color-danger-600);
    --cb-status-danger-bg: var(--cb-color-danger-50);
    --cb-status-danger-text: var(--cb-color-danger-800);
    --cb-status-info: var(--cb-color-info-500);
    --cb-status-info-bg: var(--cb-color-info-50);
    --cb-status-info-text: var(--cb-color-info-800);
    --cb-status-neutral-bg: var(--cb-color-neutral-50);
    --cb-status-neutral-text: var(--cb-color-neutral-800);

    /* Spacing */
    --cb-space-0: 0;
    --cb-space-1: 0.25rem;
    --cb-space-2: 0.5rem;
    --cb-space-3: 0.75rem;
    --cb-space-4: 1rem;
    --cb-space-5: 1.5rem;
    --cb-space-6: 2rem;
    --cb-space-7: 3rem;
    --cb-space-8: 4rem;
    --cb-space-9: 6rem;

    /* Radius */
    --cb-radius-0: 0;
    --cb-radius-xs: 0.25rem;
    --cb-radius-sm: 0.375rem;
    --cb-radius-md: 0.5rem;
    --cb-radius-lg: 0.75rem;
    --cb-radius-xl: 1rem;
    --cb-radius-pill: 999px;

    /* Elevation */
    --cb-shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.06);
    --cb-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06), 0 10px 24px rgba(28, 25, 23, 0.04);
    --cb-shadow-md: 0 16px 32px rgba(28, 25, 23, 0.08);
    --cb-shadow-lg: 0 24px 56px rgba(28, 25, 23, 0.12);
    --cb-shadow-focus: 0 0 0 3px rgba(234, 88, 12, 0.18);

    /* Controls */
    --cb-control-height-sm: 2rem;
    --cb-control-height-md: 2.5rem;
    --cb-control-height-lg: 3rem;
    --cb-control-padding-x-sm: var(--cb-space-3);
    --cb-control-padding-x-md: var(--cb-space-4);
    --cb-control-padding-x-lg: var(--cb-space-5);
    --cb-control-icon-size: 1rem;

    /* Motion */
    --cb-motion-fast: 120ms ease;
    --cb-motion-base: 180ms ease;
    --cb-motion-slow: 240ms ease;
    --cb-motion-spin: 700ms;

    /* Layering */
    --cb-z-base: 0;
    --cb-z-raised: 10;
    --cb-z-sticky: 100;
    --cb-z-dropdown: 400;
    --cb-z-drawer: 700;
    --cb-z-modal: 800;
    --cb-z-toast: 900;

    /* Layout */
    --cb-shell-max-width: 80rem;
    --cb-page-max-width: 72rem;
    --cb-wide-page-max-width: 96rem;
    --cb-reading-width: 42rem;
    --cb-rail-width: 20rem;
    --cb-transition: var(--cb-motion-base);

    /* Legacy compatibility aliases. New CSS should prefer semantic tokens above. */
    --cb-primary: var(--cb-action-primary);
    --cb-primary-deep: var(--cb-action-primary-hover);
    --cb-primary-dark: var(--cb-action-primary-hover);
    --cb-primary-light: var(--cb-action-primary-soft);
    --cb-foreground: var(--cb-text-primary);
    --cb-muted-foreground: var(--cb-text-muted);
    --cb-border: var(--cb-border-default);
    --cb-card: var(--cb-surface-card);
    --cb-muted: var(--cb-surface-muted);
    --cb-surface: var(--cb-surface-page);
    --cb-shadow-soft: var(--cb-shadow-sm);
    --cb-shadow-card: var(--cb-shadow-md);
    --cb-color-ink: var(--cb-brand-ink-900);
    --cb-color-muted: var(--cb-brand-ink-700);
    --cb-color-surface: var(--cb-brand-sand-050);
    --cb-color-panel: rgba(255, 255, 255, 0.9);
    --cb-color-panel-strong: var(--cb-color-white);
    --cb-color-line: rgba(24, 34, 48, 0.12);
    --cb-color-line-strong: rgba(24, 34, 48, 0.22);
    --cb-color-accent: var(--cb-brand-clay-500);
    --cb-color-accent-deep: var(--cb-brand-clay-700);
    --cb-color-accent-soft: var(--cb-brand-sand-200);
    --cb-color-success: var(--cb-brand-forest-600);
    --cb-color-warning: var(--cb-brand-amber-600);
}

[data-cb-experience="public"] {
    --cb-surface-page: var(--cb-brand-sand-050);
    --cb-surface-card: var(--cb-color-white);
    --cb-text-primary: var(--cb-brand-ink-900);
    --cb-text-secondary: var(--cb-brand-ink-700);
    --cb-action-primary: var(--cb-brand-clay-500);
    --cb-action-primary-hover: var(--cb-brand-clay-700);
}

[data-cb-experience="app"],
[data-cb-experience="company-admin"],
[data-cb-experience="platform-admin"],
[data-cb-experience="guest-order"] {
    --cb-font-display: var(--cb-font-heading);
    --cb-surface-page: var(--cb-color-stone-50);
    --cb-surface-card: var(--cb-color-white);
    --cb-text-primary: var(--cb-color-stone-900);
    --cb-text-secondary: var(--cb-color-stone-700);
    --cb-text-muted: var(--cb-color-stone-500);
}