/*
 * Devspool product theme.
 *
 * Scynett ships design tokens as a brand-neutral contract and expects each product to layer its
 * identity on top by overriding the same custom properties. This file is that layer: it is linked
 * after scynett-tokens.css and changes values only — never names — so every Scynett.Frontend.UI
 * component picks up the Devspool look without knowing anything about Devspool.
 *
 * The identity is modernist rather than the usual product-dashboard look: white ground, deep teal
 * ink, orange reserved for actions and match emphasis, Archivo throughout, square corners and hard
 * rules instead of rounded cards and shadows.
 */

:root {
    /* ── Brand ─────────────────────────────────────────────── */
    --scynett-brand-primary: #F57C00;
    --scynett-brand-primary-hover: #DC6E00;
    --scynett-brand-primary-active: #C96400;
    --scynett-brand-accent: #062E3F;
    --scynett-brand-accent-strong: #0B3B4A;
    --scynett-brand-accent-tint: rgba(245, 124, 0, .09);
    --scynett-brand-surface: #062E3F;
    --scynett-brand-on-surface: #FFFFFF;

    /* ── Dark surface scale (the teal shell) ───────────────── */
    --scynett-surface-900: #062E3F;
    --scynett-surface-800: #0B3B4A;
    --scynett-surface-700: #14495A;
    --scynett-surface-600: #1E5769;

    /* ── Light surface scale ───────────────────────────────── */
    --scynett-surface-50: #FFFFFF;
    --scynett-surface-100: #F7F9FA;
    --scynett-surface-200: #F3F6F7;
    --scynett-surface-300: #E3E9EB;

    /* ── Neutral / text scale ──────────────────────────────── */
    --scynett-neutral-900: #062E3F;
    --scynett-neutral-700: #0B3B4A;
    --scynett-neutral-500: rgba(6, 46, 63, .55);
    --scynett-neutral-400: rgba(6, 46, 63, .40);
    --scynett-neutral-300: rgba(6, 46, 63, .28);
    --scynett-neutral-200: rgba(6, 46, 63, .12);
    --scynett-neutral-100: #F3F6F7;

    /* ── Semantic ──────────────────────────────────────────── */
    --scynett-success: #0B8B69;
    --scynett-success-bg: #E7F5F0;
    --scynett-success-dark: #07684E;
    --scynett-warning: #B45A00;
    --scynett-warning-bg: rgba(245, 124, 0, .09);
    --scynett-warning-dark: #8A4500;
    --scynett-error: #B3261E;
    --scynett-error-bg: #FBECEB;
    --scynett-error-dark: #8C1D18;
    --scynett-info: #0B3B4A;
    --scynett-info-bg: #F3F6F7;
    --scynett-info-dark: #062E3F;

    /* ── Component-facing aliases ──────────────────────────── */
    --scynett-surface-background: #FFFFFF;
    --scynett-surface-raised: #FFFFFF;
    --scynett-surface-inverse: #062E3F;
    --scynett-border-subtle: rgba(6, 46, 63, .12);
    --scynett-text-primary: #062E3F;
    --scynett-text-secondary: rgba(6, 46, 63, .55);
    --scynett-text-placeholder: rgba(6, 46, 63, .40);
    --scynett-text-disabled: rgba(6, 46, 63, .28);

    /* ── Typography ────────────────────────────────────────── */
    --scynett-font-display: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --scynett-font-ui: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --scynett-font-mono: 'Archivo', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --scynett-weight-regular: 400;
    --scynett-weight-medium: 500;
    --scynett-weight-semibold: 700;
    --scynett-weight-bold: 800;

    /*
     * Square by default. The Devspool prototype uses no rounding at all; the token names are kept
     * so shared components still resolve them, they simply resolve to nothing.
     */
    --scynett-radius-xs: 0;
    --scynett-radius-sm: 0;
    --scynett-radius-md: 0;
    --scynett-radius-lg: 0;
    --scynett-radius-xl: 0;
    --scynett-radius-full: 0;

    /* Structure comes from rules, not from elevation. */
    --scynett-shadow-1: none;
    --scynett-shadow-2: none;
    --scynett-shadow-3: 0 2px 14px rgba(6, 46, 63, .10);
    --scynett-shadow-focus: 0 0 0 3px rgba(245, 124, 0, .30);

    --scynett-sidebar-width: 252px;
    --scynett-topbar-height: 64px;

    /* ── Devspool specific ─────────────────────────────────── */
    --dp-ink: #062E3F;
    --dp-ink-2: #0B3B4A;
    --dp-accent: #F57C00;
    --dp-accent-hover: #DC6E00;
    --dp-accent-ink: #B45A00;
    --dp-accent-tint: rgba(245, 124, 0, .09);
    --dp-surface: #F7F9FA;
    --dp-surface-2: #F3F6F7;
    --dp-divider: rgba(6, 46, 63, .28);
    --dp-hair: rgba(6, 46, 63, .12);
    --dp-muted: rgba(6, 46, 63, .55);
    --dp-muted-2: rgba(6, 46, 63, .40);

    --dp-bottom-nav-height: 62px;
    --dp-mobile-header-height: 55px;
}