/*
 * ciraApps Platform — Theme Token Layer
 * ------------------------------------------------------------------
 * This file is the single, swappable theming surface for the platform
 * onboarding wizard and shell. Components style themselves exclusively
 * from the semantic tokens declared here — they never hardcode colors,
 * fonts, spacing, radii or shadows.
 *
 * Architecture:
 *   1. Primitives  (--p-*)  raw, theme-independent scale values.
 *   2. Semantic    (--color-*, --font-*, --space-*, ...) intent-based
 *      tokens that map primitives onto UI roles. Components consume ONLY
 *      these semantic tokens.
 *
 * To ship a future/branded theme: replace or override the semantic token
 * block below (e.g. add a scoped `.theme-dark` block or swap this file).
 * No component markup or component CSS needs to change.
 *
 * Current theme: "Default Light" — a clean, neutral placeholder.
 */

/* ============================================================
 * BRAND TYPEFACES — self-hosted variable fonts (Inter, Outfit)
 * Files live in wwwroot/fonts/; each is a single variable-weight
 * file covering the full 100–900 range, so no per-weight @font-face
 * blocks are needed.
 * ============================================================ */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/Inter-Variable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/Inter-Italic-Variable.woff2") format("woff2");
}

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/outfit/Outfit-Variable.woff2") format("woff2");
}

:root {
    color-scheme: light;

    /* ============================================================
     * 1. PRIMITIVES — raw scales (not consumed directly by components)
     * ============================================================ */

    /* Neutrals — re-anchored 2026-08-04 to a constant ~210° hue (each step's original
       saturation/lightness preserved). The old scale's hue drifted from ~210° at the light
       end up to ~222° at the darkest step; the Figma mockups are consistently ~208-210°
       throughout, so this closes that drift rather than introducing a new hue. */
    --p-white: #ffffff;
    --p-neutral-50: #FAFCFF;
    --p-neutral-100: #F5F8FD;
    --p-neutral-200: #e2e9f0;
    --p-neutral-300: #cbd6e1;
    --p-neutral-400: #94a6b8;
    --p-neutral-500: #64788b;
    --p-neutral-550: #5a7086;
    --p-neutral-600: #475869;
    --p-neutral-700: #334455;
    --p-neutral-800: #1e2d3b;
    --p-neutral-900: #0f1d2a;
    --p-neutral-900-a12: rgba(15, 29, 42, 0.12);

    /* Brand (blue) */
    --p-brand-50: #e9f3fc;
    --p-brand-100: #d7eaf9;
    --p-brand-200: #b3d8f4;
    --p-brand-300: #8bc3ee;
    --p-brand-500: #2991e0;
    --p-brand-600: #1b75bb;
    --p-brand-700: #165f98;

    /* Tertiary accent (teal) — Kendo's third semantic color role, unused elsewhere in the
       app, so claimed for the accent teal from the Figma Dashboard mockup (Platform-Mockups,
       node 109:2). 50/100 are the exact quick-link chip border/bg colors, 500 is the exact
       quick-link shadow tint, 600 is the exact "Enterprise trial" badge fill — all sampled
       directly from the mockup. 200/300/700 are derived to complete the ramp (same hue/
       saturation as the sampled steps). */
    --p-tertiary-50: #edfaf8;
    --p-tertiary-100: #d6f0f0;
    --p-tertiary-200: #9de1dd;
    --p-tertiary-300: #5fd6c8;
    --p-tertiary-500: #29c4a9;
    --p-tertiary-600: #27b898;
    --p-tertiary-700: #20967f;

    /* Status */
    --p-green-50: #ecfdf5;
    --p-green-500: #10b981;
    --p-green-700: #047857;
    --p-red-50: #fef2f2;
    --p-red-500: #ef4444;
    --p-red-700: #b91c1c;
    --p-amber-50: #fffbeb;
    --p-amber-500: #f59e0b;
    --p-amber-700: #b45309;

    /* Entity-icon state chips — sampled from the approved icon templates. They are a fill under a
       ~15px white mark, not a text colour, so they sit lighter than the --p-green-700/--p-red-700
       text roles above and cannot be replaced by them. */
    --p-chip-green: #5AB59A;
    --p-chip-red: #DD5E56;

    /* Type families */
    --p-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --p-font-heading: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --p-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* ============================================================
     * 2. SEMANTIC TOKENS — the styling contract for components
     *
     * These are BRIDGED to Kendo UI CSS variables (--kendo-*) so that a
     * theme swapped in via kendo-theme-custom.css (Kendo Theme Manager /
     * Sass Theme Builder export) automatically reskins the hand-styled
     * wizard shell too. The second value in each var() is a graceful
     * fallback to the local primitive if the Kendo theme is absent.
     * ============================================================ */

    /* Surfaces & background */
    --color-bg: var(--kendo-color-surface, var(--p-neutral-100));
    --color-surface: var(--kendo-color-surface-alt, var(--p-white));
    --color-surface-raised: var(--kendo-color-surface-alt, var(--p-white));
    --color-surface-sunken: var(--kendo-color-base-subtle, var(--p-neutral-200));
    --color-surface-hover: var(--p-neutral-100);
    --color-surface-subtle: var(--p-neutral-50);
    --color-card-surface-subdued: var(--p-neutral-50);
    /* Inverted surface for dark chrome on a light theme (the Dark button, dark tooltips) — no
       Kendo bridge, since Kendo's own "inverse" role (--kendo-color-inverse) is a plain gray,
       not the brand navy the Figma mockups use here. */
    --color-surface-dark: var(--p-neutral-900);
    --color-on-dark: var(--p-white);

    /* Borders */
    --color-border: var(--kendo-color-border, var(--p-neutral-200));
    --color-border-strong: var(--p-neutral-300);
    --color-card-border: var(--p-neutral-900-a12);
    --color-flow-bubble-bg: var(--p-neutral-100);
    --color-flow-tint-bg: var(--p-neutral-50);
    --color-flow-pill-bg: var(--p-neutral-100);
    --color-flow-chip-fg: var(--p-neutral-500);
    --color-status-healthy: var(--p-green-500);

    /* Text */
    --color-text: var(--kendo-color-on-app-surface, var(--p-neutral-800));
    --color-text-muted: var(--p-neutral-500);
    --color-scrim: var(--p-neutral-500);
    --color-hairline: var(--p-neutral-900-a12);
    --color-text-subtle: var(--p-neutral-400);
    --color-heading: var(--kendo-color-on-app-surface, var(--p-neutral-900));
    --color-text-chip: var(--p-neutral-800);
    --color-text-annotation: var(--p-neutral-600);
    --color-text-placeholder: var(--p-neutral-400);

    /* Icons — Kendo resolves --kendo-icon-color to currentColor for both fill and stroke, so an
       <Icon> normally just inherits the color of whatever it sits in: a PlatformButton's icon
       follows the button's own text color (hover and active included) with no CSS of its own.
       These are only for icons deliberately painted a different color than the text around them —
       chevrons, affordance glyphs, state marks. Steps reuse the neutrals the text ladder above
       already names: -muted is --color-text-muted's step, -faint is fainter than any text step,
       for an empty/placeholder mark that should read as absent rather than as content. No
       -subtle step yet; nothing needs one, and the neutral it would take is --color-text-subtle's. */
    --color-icon-muted: var(--p-neutral-500);
    --color-icon-faint: var(--p-neutral-200);

    /* Primary / interactive */
    --color-primary: var(--kendo-color-primary, var(--p-brand-600));
    --color-primary-hover: var(--kendo-color-primary-hover, var(--p-brand-700));
    --color-primary-active: var(--kendo-color-primary-active, var(--p-brand-700));
    --color-on-primary: var(--kendo-color-on-primary, var(--p-white));
    --color-primary-soft-bg: var(--kendo-color-primary-subtle, var(--p-brand-50));
    --color-primary-soft-border: var(--p-brand-200);

    /* Tertiary / accent (teal) — mirrors the Primary bridge above. Header quick-links and
       promo badges consume this once built. */
    --color-tertiary: var(--kendo-color-tertiary, var(--p-tertiary-600));
    --color-tertiary-hover: var(--kendo-color-tertiary-hover, var(--p-tertiary-700));
    --color-tertiary-active: var(--kendo-color-tertiary-active, var(--p-tertiary-700));
    --color-on-tertiary: var(--kendo-color-on-tertiary, var(--p-white));
    --color-tertiary-soft-bg: var(--kendo-color-tertiary-subtle, var(--p-tertiary-50));
    --color-tertiary-soft-border: var(--p-tertiary-50);
    /* --p-tertiary-100 (the mockup's quick-link hover/current highlight) has no Kendo
       equivalent — Kendo exposes -hover/-active/-emphasis/-subtle as single tiers, nothing
       compound like "subtle-hover" — so this bridges straight to the primitive, same pattern
       as --color-surface-hover above. */
    --color-tertiary-soft-bg-hover: var(--p-tertiary-100);

    /* Selected / active states */
    --color-selected-bg: var(--kendo-color-primary-subtle, var(--p-brand-50));
    --color-selected-border: var(--kendo-color-primary, var(--p-brand-600));

    /* Focus ring */
    --color-focus-ring: var(--p-brand-300);

    /* Status roles */
    --color-success: var(--p-green-700);
    --color-success-bg: var(--p-green-50);
    --color-danger: var(--p-red-700);
    --color-danger-bg: var(--p-red-50);
    --color-warning: var(--p-amber-700);
    --color-warning-bg: var(--p-amber-50);

    /* Entity-icon state chips (assets/icons/system/icons.css, .ic-badge.chip-*) — the filled
       bottom-right disc that reports a terminal lifecycle state on a composed source icon. */
    --color-icon-chip-ok: var(--p-chip-green);
    --color-icon-chip-error: var(--p-chip-red);

    /* Dashboard paused-flow badge (be9e4f R6/AC9) — semantic tokens only.
       Paused badge repointed 2026-08-04 from amber to neutral per the Figma Dashboard mockup
       (Platform-Mockups, node 109:2) — originally onto a dedicated --p-slate-* pair, now onto
       the re-anchored --p-neutral-* scale directly (see Neutrals comment above) so there's
       only one blue-tinted neutral scale in the file, not two. */
    /* Neutral status pill (Platform-Mockups 06.01 downgrade dialog, node 2013:8089): one calm
       grey for every stopped/changed flow, so the list reads as information, not alarm. */
    --color-badge-neutral-bg: var(--p-neutral-200);
    --color-badge-neutral-fg: var(--p-neutral-550);
    --color-badge-paused-bg: var(--p-neutral-200);
    --color-badge-paused-fg: var(--p-neutral-600);
    --color-badge-paused-dot: var(--p-neutral-600);

    /* Control surfaces (inputs / buttons secondary) */
    --color-control-bg: var(--p-white);
    --color-control-border: var(--p-neutral-300);
    --color-control-disabled-bg: var(--p-neutral-100);
    --color-control-disabled-text: var(--p-neutral-400);
    --color-track: var(--p-neutral-300);

    /* Typography */
    --font-sans: var(--kendo-font-family, var(--p-font-sans));
    --font-heading: var(--p-font-heading);
    --font-mono: var(--p-font-mono);

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.8125rem;  /* 13px */
    --font-size-base: 0.875rem;/* 14px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.375rem;   /* 22px */
    --font-size-2xl: 1.75rem;   /* 28px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;

    /* Spacing scale (4px base) */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* Component sizing — fixed width/height for small icon-only controls and card icons.
       Never reuse --space-* here even when values coincide numerically: spacing tokens
       govern gaps between elements, these govern an element's own box size, and the two
       must be able to change independently. */
    --size-icon-sm: 1.75rem; /* 28px */
    --size-icon-md: 2rem;    /* 32px */

    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;
    --radius-full: 999px;

    /* Borders */
    --border-width: 1px;
    --border-width-strong: 2px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(20, 50, 80, 0.06);
    --shadow-md: 0 2px 8px rgba(20, 50, 80, 0.08);
    --shadow-lg: 0 8px 22px rgba(20, 60, 90, 0.07), 0 1px 2px rgba(20, 50, 80, 0.05);

    /* Modal/dialog elevation — needs more separation than an inline card since it floats over a dimmed backdrop */
    --shadow-modal: 0 12px 32px rgba(20, 50, 80, 0.16);

    /* Tertiary-tinted shadow for teal accent elements (header quick-links in the Figma
       mockup). rgba channels (41, 196, 169) are --p-tertiary-500 (#29c4a9) — CSS custom
       properties can't be split into rgba() channels, so this is a literal restatement of
       that primitive's RGB, kept in sync if --p-tertiary-500 ever changes. */
    --shadow-tertiary: 0px 2px 5px 0px rgba(41, 196, 169, 0.1);

    /* Focus ring composition */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);

    /* Motion */
    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;

    /* Layout */
    --layout-max-width: 76.25rem; /* 1220px page frame in every Platform Mockups screen */
}