/* ---------------------------------------------------------------------------
   Design tokens, ported from the computed token set of www.oliver-kroener.de.

   The website is a single-accent, dark-only system: one brand hue (40.23, a
   warm orange) carries every interactive state, and everything else is a
   neutral. This app has a light/dark toggle, so the tokens are split in two:

     * The brand ramp is hue-derived and mode-independent — identical values to
       the website, so a colour picked here matches the site exactly.
     * Mode-dependent neutrals defer to MudBlazor's own --mud-palette-* custom
       properties. MudThemeProvider rewrites those when the theme toggles, so
       deferring to them is what makes these tokens follow the toggle without a
       second switching mechanism of our own. Their values are set in
       AppTheme.cs, which is where the light and dark neutrals actually live.

   light-dark() covers the few mode-dependent tokens that have no palette
   counterpart.
   --------------------------------------------------------------------------- */

/* light-dark() keys off color-scheme, and MudBlazor sets that only on
   .mud-input — at the root it stays `normal`, which silently resolves every
   light-dark() to its light value even in dark mode. Applying MudBlazor's own
   --mud-native-html-color-scheme here is what makes those tokens follow the
   toggle; it also hands the theme to native scrollbars and form controls. */
:root {
    color-scheme: var(--mud-native-html-color-scheme, light);
}

:root {
    /* -- Brand hue ------------------------------------------------------- */
    /* Every brand colour below is derived from this one number, exactly as on
       the website. Changing it re-tints the whole app coherently. */
    --hue: 40.23;

    /* -- Brand ramp (identical in light and dark) ------------------------- */
    --color-primary: oklch(0.655 0.2 var(--hue));
    --color-primary-hover: oklch(0.71 0.19 var(--hue));
    --color-primary-active: oklch(0.585 0.2 var(--hue));
    --color-primary-interactive: oklch(0.56 0.2 var(--hue));
    --color-primary-foreground: #fff;
    --color-accent: oklch(0.71 0.19 var(--hue));
    --color-accent-hover: oklch(0.655 0.2 var(--hue));
    --color-emphasis: oklch(0.72 0.17 var(--hue));

    --color-primary-90: oklch(0.655 0.2 var(--hue) / 0.9);
    --color-primary-60: oklch(0.655 0.2 var(--hue) / 0.6);
    --color-primary-40: oklch(0.655 0.2 var(--hue) / 0.4);
    --color-primary-20: oklch(0.655 0.2 var(--hue) / 0.2);
    --color-primary-15: oklch(0.655 0.2 var(--hue) / 0.15);
    --color-primary-10: oklch(0.655 0.2 var(--hue) / 0.1);
    --color-primary-08: oklch(0.655 0.2 var(--hue) / 0.08);
    --color-primary-05: oklch(0.655 0.2 var(--hue) / 0.05);
    --color-primary-surface: oklch(0.655 0.2 var(--hue) / 0.15);

    /* The 0.655 step reaches only ~3.4:1 on white, so anything that has to be
       *read* on a light surface drops to the 0.56 step (~5.1:1). This is the
       same split the website makes with its -interactive token. */
    --color-primary-readable: light-dark(var(--color-primary-interactive), var(--color-primary));

    --color-focus: var(--color-primary);
    --color-focus-ring: oklch(0.655 0.2 var(--hue) / 0.4);
    --color-focus-ring-subtle: oklch(0.655 0.2 var(--hue) / 0.2);

    /* -- Neutrals (follow the theme toggle via MudBlazor's palette) ------- */
    --color-background: var(--mud-palette-background);
    --color-surface: var(--mud-palette-surface);
    --color-surface-light: light-dark(#f2f3f5, #1a1a1a);
    --color-foreground: var(--mud-palette-text-primary);
    --color-muted: var(--mud-palette-text-secondary);
    --color-secondary-muted: #797e83;
    --color-tertiary: light-dark(#4a5057, #bec5cc);

    --color-border: var(--mud-palette-lines-default);
    --border-width-hairline: 1px;
    --border-width-emphasis: 2px;
    --border-color-subtle: var(--color-border);
    --border-color-strong: light-dark(rgb(0 0 0 / 0.22), rgb(255 255 255 / 0.22));

    /* The header stays black in both modes — it is the strongest brand cue the
       website has, and it is what makes the app read as the same product. The
       site's 0.7 works because it sits over a black page; over a light one the
       same alpha reads as mid-grey, so light mode needs a near-opaque black to
       land on the same colour. */
    --color-header-bg: light-dark(rgb(0 0 0 / 0.95), rgb(0 0 0 / 0.7));
    --color-nav-bg: rgb(0 0 0 / 0.95);
    --color-submenu-bg: light-dark(rgb(255 255 255 / 0.98), rgb(17 17 17 / 0.98));

    /* -- Radii (verbatim from the website) -------------------------------- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    --radius-control: 0.75rem;
    --radius-control-sm: 0.5rem;
    --radius-input: 0.75rem;
    --radius-card: 1.5rem;
    --radius-surface: 2rem;
    --radius-media: 1.5rem;
    --radius-pill: 9999px;
    --radius-accent-bar: 2px;

    /* -- Elevation -------------------------------------------------------- */
    /* The website's shadow geometry, verbatim. Only the ink varies by mode: a
       pure-black ground swallows the alphas that read correctly on white, so
       each level carries a much heavier one in dark.

       light-dark() takes a <color>, not an arbitrary value, so it wraps the ink
       alone — wrapping a whole shadow makes the declaration invalid and the
       shadow silently disappears. */
    --shadow-ink-sm: light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.4));
    --shadow-ink-md: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
    --shadow-ink-lg: light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.6));
    --shadow-ink-xl: light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.7));
    --shadow-ink-card: light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.85));
    --shadow-ink-card-hover: light-dark(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.9));
    --shadow-ink-panel: light-dark(rgb(0 0 0 / 0.28), rgb(0 0 0 / 0.7));

    --shadow-sm: 0 1px 2px 0 var(--shadow-ink-sm);
    --shadow-md: 0 4px 6px -1px var(--shadow-ink-md);
    --shadow-lg: 0 10px 15px -3px var(--shadow-ink-lg);
    --shadow-xl: 0 20px 25px -5px var(--shadow-ink-xl);
    --shadow-card: 0 10px 30px -18px var(--shadow-ink-card);
    --shadow-card-hover: 0 18px 44px -20px var(--shadow-ink-card-hover);
    --shadow-panel: 0 12px 40px -14px var(--shadow-ink-panel);
    --shadow-button-hover: 0 6px 18px -4px oklch(0.655 0.2 var(--hue) / 0.35);
    --shadow-button-active: 0 2px 10px -2px oklch(0.655 0.2 var(--hue) / 0.5);

    --blur-md: 12px;

    /* -- Typography ------------------------------------------------------- */
    /* Same declaration as the website. Graphik and Inter are used when the
       reader happens to have them; otherwise the system stack takes over. No
       webfont is fetched, so the app still makes no third-party request. */
    --font-family-base: "Graphik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

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

    --leading-tight: 1.25;
    --leading-relaxed: 1.625;

    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-widest: 0.1em;
    /* The website's buttons: 15px type with 1.2px of tracking. */
    --tracking-button: 0.08em;

    /* -- Motion ----------------------------------------------------------- */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration-base: 0.2s;
    --duration-slow: 0.3s;

    /* -- Control behaviour ------------------------------------------------ */
    --btn-border-width: var(--border-width-hairline);
    --btn-lift-hover: -2px;
    --btn-press-scale: 0.98;

    /* -- Layout ----------------------------------------------------------- */
    --touch-target-min: 44px;
}