/* =====================================================================
   Project Food — design tokens (Phase 13B: platform design system)

   This is the single config point for the platform's own colour tokens.
   The platform's brand NAME/logo path live in PHP as \App\Brand (see
   app/Brand.php) — --brand-color below is the CSS half of that same
   single-config-point intent. No final visual design exists yet for
   Order At Tee (separate, later design track); the palette below is the
   same placeholder ported from the original handoff, not a finished
   brand.

   Single source of truth for every colour/type/radius/spacing/motion
   token used across BOTH the admin screens and the customer-facing
   ordering flow. Loaded once, unconditionally, at the top of
   app/Views/layout.php — no other file should define a competing
   :root block for these names.

   The tokens/*.css files are the design system's own token files,
   ported verbatim (per its handoff README: "adopt close to verbatim...
   do not round values to a 4/8px grid"). This file is just the
   aggregator, the self-hosted @font-face rules (the bundle's own
   fonts.css loads from Google Fonts — we self-host instead, and
   already did before this phase), and a compat-alias layer mapping
   this app's existing variable names onto the canonical design-system
   ones, so the hundreds of existing var(--brand-color) / var(--canvas) /
   etc. call sites across admin.css/components.css/menu.css/
   menu-builder.css keep working without a site-wide rename.

   Two names COULD NOT be safely aliased and were renamed at every call
   site instead, because the old name's numbering doesn't correspond
   1:1 to the same pixel value in the new scale:
     - --space-1..6 (old 4/8/12/16/24/32px) → every call site now
       references the design-system slot that has the SAME pixel value
       (old --space-2 (8px) is now var(--space-4), etc.) rather than
       silently changing meaning under an unchanged name.
     - --font-heading → renamed to --font-display (the design system's
       own name for the same Sora-headings token) at every call site.
   ===================================================================== */

/* ?v=2 (Phase 34 banner hues) — @import URLs are static text, so unlike
   this file's own <link> (cache-busted per-deploy via asset_url()'s
   filemtime query), nothing forces the CDN/browser to refetch this one
   when only colors.css itself changes. Bump this manually whenever
   colors.css changes, same reasoning as a cache-busted script tag. */
@import url('tokens/colors.css?v=2');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/radius.css');
@import url('tokens/elevation.css');
@import url('tokens/motion.css');
@import url('tokens/base.css');

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/sora-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/sora-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/sora-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/sora-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ---------------------------------------------------------------------
   Compat aliases — this app's existing token names, pointed at the
   canonical design-system values above. Existing CSS across the whole
   app keeps working unchanged; only the VALUES it resolves to are now
   the exact, final design-system ones instead of the earlier
   hand-picked approximations (e.g. --ink-faint was #9CA199, is now
   #8E938B).
   --------------------------------------------------------------------- */
:root {
    --brand-color: var(--verdigris-600);
    --brand-color-soft: var(--verdigris-100);
    --brand-color-contrast: var(--text-on-accent);
    --canvas: var(--surface-page);
    --surface: var(--surface-card);
    --ink: var(--ink-900);
    --ink-muted: var(--text-muted);
    --ink-faint: var(--text-faint);
    --border: var(--border-subtle);
    --amber: var(--amber-600);
    --amber-soft: var(--warning-surface);
    --rust: var(--rust-600);
    --rust-soft: var(--danger-surface);
    --shadow-card: var(--shadow-xs);
}