/*
 * Scynett design token contract — neutral base layer.
 *
 * This stylesheet defines the token NAMES and STRUCTURE shared by every
 * Scynett product, with brand-neutral default values. It carries no product
 * identity, no brand fonts, and no external network dependencies.
 *
 * Products theme themselves by linking a product theme stylesheet AFTER this
 * one and overriding any subset of these custom properties on :root, e.g.:
 *
 *   <link href="_content/Scynett.Frontend.DesignTokens/css/scynett-tokens.css" rel="stylesheet" />
 *   <link href="theme/my-product-theme.css" rel="stylesheet" />
 *
 * Do not add product-specific values (colours, font families, brand assets)
 * to this file — they belong in the product theme layer.
 */

:root {
    /* ── Brand (neutral defaults — override in the product theme) ── */
    --scynett-brand-primary: #2563EB;
    --scynett-brand-primary-hover: #1D4ED8;
    --scynett-brand-primary-active: #1E40AF;
    --scynett-brand-accent: #0EA5E9;
    --scynett-brand-accent-strong: #0284C7;
    --scynett-brand-accent-tint: #E0F2FE;
    --scynett-brand-surface: #0F172A;
    --scynett-brand-on-surface: #FFFFFF;

    /* ── Dark surface scale (sidebar / shell) ──────────────── */
    --scynett-surface-900: #0F172A;
    --scynett-surface-800: #1E293B;
    --scynett-surface-700: #334155;
    --scynett-surface-600: #475569;

    /* ── Light surface scale ───────────────────────────────── */
    --scynett-surface-50: #F8FAFC;
    --scynett-surface-100: #F1F5F9;
    --scynett-surface-200: #E2E8F0;
    --scynett-surface-300: #CBD5E1;

    /* ── Neutral / text scale ──────────────────────────────── */
    --scynett-neutral-900: #0F172A;
    --scynett-neutral-700: #334155;
    --scynett-neutral-500: #64748B;
    --scynett-neutral-400: #94A3B8;
    --scynett-neutral-300: #CBD5E1;
    --scynett-neutral-200: #E2E8F0;
    --scynett-neutral-100: #F1F5F9;

    /* ── Semantic ──────────────────────────────────────────── */
    --scynett-success: #16A34A;
    --scynett-success-bg: #DCFCE7;
    --scynett-success-dark: #15803D;
    --scynett-warning: #F59E0B;
    --scynett-warning-bg: #FEF3C7;
    --scynett-warning-dark: #B45309;
    --scynett-error: #DC2626;
    --scynett-error-bg: #FEE2E2;
    --scynett-error-dark: #B91C1C;
    --scynett-info: #0EA5E9;
    --scynett-info-bg: #E0F2FE;
    --scynett-info-dark: #0369A1;

    /* ── Component-facing aliases (consumed across UI.Components / UI.Layouts) ── */
    --scynett-surface-background: var(--scynett-surface-50);
    --scynett-surface-raised: #FFFFFF;
    --scynett-surface-inverse: var(--scynett-surface-900);
    --scynett-border-subtle: var(--scynett-surface-200);
    --scynett-text-primary: var(--scynett-neutral-900);
    --scynett-text-secondary: var(--scynett-neutral-500);
    --scynett-text-placeholder: var(--scynett-neutral-400);
    --scynett-text-disabled: var(--scynett-neutral-300);

    /* ── Typography (system stacks — brand fonts live in the product theme) ── */
    --scynett-font-display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --scynett-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --scynett-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
    --scynett-weight-regular: 400;
    --scynett-weight-medium: 500;
    --scynett-weight-semibold: 600;
    --scynett-weight-bold: 700;
    --scynett-text-2xs: 10px;
    --scynett-text-xs: 11px;
    --scynett-text-sm: 12px;
    --scynett-text-base: 13px;
    --scynett-text-md: 14px;
    --scynett-text-lg: 16px;
    --scynett-text-xl: 18px;
    --scynett-text-2xl: 22px;
    --scynett-text-3xl: 28px;
    --scynett-text-4xl: 36px;
    --scynett-leading-tight: 1.2;
    --scynett-leading-snug: 1.35;
    --scynett-leading-normal: 1.5;
    --scynett-leading-relaxed: 1.65;
    --scynett-tracking-tight: -0.02em;
    --scynett-tracking-wide: 0.03em;
    --scynett-tracking-widest: 0.1em;

    /* ── Spacing (4px base) ────────────────────────────────── */
    --scynett-space-1: 4px;
    --scynett-space-2: 8px;
    --scynett-space-3: 12px;
    --scynett-space-4: 16px;
    --scynett-space-5: 20px;
    --scynett-space-6: 24px;
    --scynett-space-8: 32px;
    --scynett-space-10: 40px;
    --scynett-space-12: 48px;
    --scynett-space-16: 64px;

    /* ── Radii ─────────────────────────────────────────────── */
    --scynett-radius-xs: 2px;
    --scynett-radius-sm: 4px;
    --scynett-radius-md: 6px;
    --scynett-radius-lg: 8px;
    --scynett-radius-xl: 12px;
    --scynett-radius-full: 9999px;

    /* ── Shadows ───────────────────────────────────────────── */
    --scynett-shadow-1: 0 1px 3px rgba(15, 23, 42, 0.08);
    --scynett-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.12);
    --scynett-shadow-3: 0 8px 32px rgba(15, 23, 42, 0.18);
    --scynett-shadow-focus: 0 0 0 2px var(--scynett-brand-primary);

    /* ── Layout dimensions ─────────────────────────────────── */
    --scynett-sidebar-width: 220px;
    --scynett-sidebar-collapsed-width: 48px;
    --scynett-topbar-height: 48px;
    --scynett-drawer-width: 400px;

    /* ── Motion ────────────────────────────────────────────── */
    --scynett-transition-fast: 150ms ease;
    --scynett-transition-base: 200ms ease;
    --scynett-transition-slow: 300ms ease;
}

/* ── Base typography (opt-in by linking this stylesheet) ───── */
body {
    font-family: var(--scynett-font-ui);
    color: var(--scynett-text-primary);
    font-size: var(--scynett-text-md);
    line-height: var(--scynett-leading-normal);
}

h1, .scynett-h1 {
    font-family: var(--scynett-font-display);
    font-size: var(--scynett-text-3xl);
    font-weight: var(--scynett-weight-semibold);
    line-height: var(--scynett-leading-tight);
    letter-spacing: var(--scynett-tracking-tight);
}

h2, .scynett-h2 {
    font-family: var(--scynett-font-display);
    font-size: var(--scynett-text-2xl);
    font-weight: var(--scynett-weight-semibold);
    line-height: var(--scynett-leading-tight);
}

h3, .scynett-h3 {
    font-family: var(--scynett-font-display);
    font-size: var(--scynett-text-xl);
    font-weight: var(--scynett-weight-semibold);
    line-height: var(--scynett-leading-snug);
}

code, .scynett-mono {
    font-family: var(--scynett-font-mono);
    font-size: var(--scynett-text-sm);
}