/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.                  */
/* Proprietary and confidential. See LICENSE in the project root.           */

/* ==========================================================================
 *  RgSystem — the design tokens of RG ONE
 *
 *  Loaded LAST in the host's <head>, after Forge's forge-dashboard.css and
 *  forge-ui-components.css, so every value here wins over the framework's
 *  default and reaches every Forge component through the bridge tokens
 *  (--surface-sN, --text-tN, --border-bN, --accent-base …).
 *
 *  The look, in one paragraph: a workshop that is tidy. Warm paper and ink in
 *  the light theme, warm graphite in the dark one — never the blue-grey of a
 *  stock dashboard — and one signal red, the company's (#e10600, the bar in
 *  the logo). Large, calm corners; shadows that are felt rather than seen;
 *  Outfit for everything, tightened for headings. Nothing here is decoration
 *  for its own sake: the warm neutrals keep long screens restful, the red is
 *  kept for the one thing on a screen that wants a decision.
 *
 *  Contrast: --fg-1 / --fg-2 pass AA on every --bg-N in both themes; the
 *  accent is darkened in the light theme (white text on it is 4.9:1) and
 *  lightened in the dark one (it is used as text there, 5.1:1 on --bg-2).
 * ========================================================================== */

:root {
    /* -------- The brand ------------------------------------------------ */
    /* The company's red. Fixed: the accent picker never moves it. */
    --rg-brand: #e10600;
    --rg-brand-deep: #a80500;
    --rg-on-brand: #ffffff;

    /* The accent the components use, on the brand's hue. The `rose` preset
       below is the same values, so a first visit (App.razor sets rose) and
       an explicit choice of it look identical. */
    --accent-h: 28;
    --accent-c: 0.205;
    --accent-l: 0.555;

    /* -------- Shape ---------------------------------------------------- */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --input-radius: 12px;
    --input-height: 44px;

    /* -------- Type ----------------------------------------------------- */
    --rg-tracking-tight: -0.022em;
    --rg-tracking-caps: 0.12em;

    /* -------- Motion --------------------------------------------------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 160ms;
    --t-med: 280ms;

    /* -------- Glass ---------------------------------------------------- */
    --glass: 0.35;
}

/* -------- Light: paper and ink ------------------------------------------ */
[data-theme="light"] {
    color-scheme: light;

    --bg-0: oklch(0.968 0.007 75);
    --bg-1: oklch(0.958 0.008 75);
    --bg-2: oklch(0.997 0.002 75);
    --bg-3: oklch(0.945 0.009 75);
    --bg-4: oklch(0.918 0.011 75);
    --surface-glass: oklch(0.99 0.004 75 / 0.72);
    --surface-glass-strong: oklch(0.99 0.004 75 / 0.88);
    --surface-elevated: oklch(0.997 0.002 75);
    --surface-sheen: oklch(1 0 0 / 0.7);

    --line: oklch(0.32 0.025 60 / 0.085);
    --line-strong: oklch(0.32 0.025 60 / 0.15);

    --fg-1: oklch(0.205 0.012 55);
    --fg-2: oklch(0.375 0.012 55);
    --fg-3: oklch(0.505 0.012 55);
    --fg-4: oklch(0.645 0.01 55);

    --accent-l: 0.535;

    --ok: oklch(0.56 0.13 155);
    --warn: oklch(0.62 0.14 65);
    --bad: oklch(0.54 0.2 27);
    --info: oklch(0.53 0.12 245);

    --shadow-color: rgb(46 32 18);
    --shadow-sm: 0 1px 2px rgb(46 32 18 / 0.05);
    --shadow-md: 0 1px 2px rgb(46 32 18 / 0.04), 0 6px 18px -6px rgb(46 32 18 / 0.08);
    --shadow-lg: 0 1px 3px rgb(46 32 18 / 0.05), 0 18px 44px -18px rgb(46 32 18 / 0.16);
    --shadow-xl: 0 2px 6px rgb(46 32 18 / 0.05), 0 36px 80px -28px rgb(46 32 18 / 0.24);
    --overlay-scrim: oklch(0.3 0.02 60 / 0.32);
    --grid-line: oklch(0.3 0.02 60 / 0.035);
}

/* -------- Dark: warm graphite -------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    --bg-0: oklch(0.145 0.004 60);
    --bg-1: oklch(0.168 0.005 60);
    --bg-2: oklch(0.196 0.005 60);
    --bg-3: oklch(0.232 0.006 60);
    --bg-4: oklch(0.272 0.007 60);
    --surface-glass: oklch(0.18 0.005 60 / 0.66);
    --surface-glass-strong: oklch(0.19 0.005 60 / 0.84);
    --surface-elevated: oklch(0.212 0.006 60);
    --surface-sheen: oklch(1 0 0 / 0.04);

    --line: oklch(0.98 0.01 80 / 0.075);
    --line-strong: oklch(0.98 0.01 80 / 0.13);

    --fg-1: oklch(0.965 0.005 80);
    --fg-2: oklch(0.8 0.008 75);
    --fg-3: oklch(0.645 0.009 70);
    --fg-4: oklch(0.5 0.009 70);

    --accent-l: 0.665;

    --ok: oklch(0.76 0.13 155);
    --warn: oklch(0.81 0.13 75);
    --bad: oklch(0.7 0.18 27);
    --info: oklch(0.76 0.11 240);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 22px -8px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.35), 0 22px 50px -20px rgb(0 0 0 / 0.65);
    --shadow-xl: 0 2px 8px rgb(0 0 0 / 0.4), 0 40px 90px -30px rgb(0 0 0 / 0.75);
    --overlay-scrim: oklch(0.08 0.004 60 / 0.6);
}

/* --------------------------------------------------------------------------
 *  Accent palettes — the person's own choice from the appearance panel.
 *  `rose` is the brand: the same hue as the logo's bar, so the default and
 *  that choice are one look. Each preset keeps the two lightness values the
 *  themes need for contrast.
 * -------------------------------------------------------------------------- */
[data-accent="rose"]   { --accent-h: 28;  --accent-c: 0.205; }
[data-accent="blue"]   { --accent-h: 250; --accent-c: 0.16; }
[data-accent="teal"]   { --accent-h: 190; --accent-c: 0.11; }
[data-accent="violet"] { --accent-h: 295; --accent-c: 0.17; }
[data-accent="amber"]  { --accent-h: 62;  --accent-c: 0.15; }

/* The tour skin — Driver.js bubble, the "nothing is saved" banner, the demo
   strip, the ghost dialogs and the completion card — ships with
   Krejci.Forge.UI.Wizards (forgeWizards.css, linked by the engine when a tour
   starts, ahead of this sheet so these tokens re-skin it). */

/* ==========================================================================
 *  Visual effects scaling (data-effects="full|balanced|minimal")
 *
 *  Windows-style "Adjust for best performance" pattern — gives the operator a
 *  one-click way to flatten the chrome on data-entry / ERP workflows where
 *  gradients, glass, and glow create visual noise that reduces sustained-use
 *  legibility. Wired from `ThemeSnapshot.VisualEffects` via forgeTheme.js;
 *  the Tweaks panel exposes the chooser. Default ("full") is no rules, so the
 *  rich look ships unchanged for marketing screenshots / first-impression
 *  surfaces.
 *
 *  Levels:
 *    • full     — no override. Gradients, blurs, glow, surface translucency
 *                 all run at preset values.
 *    • balanced — reduces glass to ~30%, softens shadows by ~50%, kills blur
 *                 on backdrops while keeping subtle elevation. Right for
 *                 daily work surfaces where some hierarchy is still useful.
 *    • minimal  — flat backgrounds, no shadows, no blur, no decorative
 *                 gradients. Borders carry all the structure. Matches the
 *                 Windows "Adjust for best performance" tier — optimal for
 *                 long-session data entry on modest hardware.
 *
 *  Scope: applies at :root via the cascade, so every component that consumes
 *  the listed tokens reacts automatically. Components that hardcode their
 *  own hex / px values bypass this scaling — those are anti-patterns per
 *  CLAUDE.md §"META-PRAVIDLO: Theme respect".
 * ========================================================================== */

html[data-effects="balanced"] {
    --glass: 0.30;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.26);
    --backdrop-blur: 0px;
}

html[data-effects="minimal"] {
    --glass: 0;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
    --backdrop-blur: 0px;
    /* Strip ambient gradient layers on every backdrop. The selector list
       targets known backdrop surfaces — adding a new gradient-painted layer
       elsewhere just means appending it here. */
}

html[data-effects="minimal"] .forge-shell,
html[data-effects="minimal"] .forge-card,
html[data-effects="minimal"] .forge-tweaks-panel,
html[data-effects="minimal"] .forge-search-palette,
html[data-effects="minimal"] .forge-dialog,
html[data-effects="minimal"] .forge-onboarding-completion,
html[data-effects="minimal"] [class*="forge-account-"],
html[data-effects="minimal"] [class*="auth-"] {
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
 *  Motion scaling (data-motion="auto|full|reduced")
 *
 *  Three-state lever that lets the operator override the OS-level
 *  `prefers-reduced-motion` setting when it does not match local preference.
 *  Auto (default) defers to @media (prefers-reduced-motion: reduce) which is
 *  already wired throughout forge-dashboard.css.
 *
 *  Levels:
 *    • auto    — respects OS setting. Default.
 *    • full    — forces motion ON even if the OS asks to reduce. For users
 *                who prefer the original animation polish on their personal
 *                workstation despite an org-wide reduce-motion policy.
 *    • reduced — caps every transition to ~10ms and disables animations
 *                regardless of OS. Useful on shared kiosks where OS settings
 *                are read-only or where ESL operators report motion sickness.
 * ========================================================================== */

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}