/**
 * Skip Manager design tokens.
 *
 * The ONLY file that may contain raw colour, radius, size or shadow values.
 * Everything else (base.css, components.css, pages) reads var(--token).
 * Source: docs/design-reference/Skip Manager Revamp.dc.html
 *
 * Colour scheme is selected by <html data-scheme="light|dark">. theme-manager.js
 * resolves the user's preference (dark | light | auto) into data-scheme.
 * Light is the default when no attribute is set.
 */

/* ---------- Scale tokens (theme independent) ---------- */
:root {
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

    /* Type scale: 7 sizes, nothing below 11px, body 15px */
    --fs-1: 11px;
    --fs-2: 12px;
    --fs-3: 13px;
    --fs-4: 15px;
    --fs-5: 17px;
    --fs-6: 22px;
    --fs-7: 28px;
    --fs-8: 32px;
    --fs-9: 48px;
    --lh-tight: 1.1;
    --lh-body: 1.5;

    /* Radii */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 14px;
    --r-xl: 16px;
    --r-sheet: 24px;
    --r-pill: 999px;

    /* Spacing, 4px base */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* Touch targets and bars */
    --tap: 44px;
    --btn-h-md: 48px;
    --btn-h-lg: 56px;
    --tabbar-h: 60px;
    --appbar-h: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);

    /* Layout */
    --content-max: 1200px;
    --card-min: 340px;
    --dialog-w: 480px;
    --bp-desktop: 768px; /* reference only; media queries cannot read vars */

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 300ms;

    /* Stacking */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-sheet-backdrop: 1040;
    --z-sheet: 1050;
    --z-toast: 1070;
}

/* ---------- Dark ---------- */
:root[data-scheme="dark"] {
    color-scheme: dark;

    --bg: #0a0e1a;
    --surface: #161b28;
    --surface-2: #1f2534;
    --surface-3: #2a3142;
    --overlay: rgba(0, 0, 0, .22);
    --scrim: rgba(0, 0, 0, .6);

    --text-1: #f8fafc;
    --text-2: #a3adc2;
    --text-3: #7c879c;
    --text-muted: #475569;
    --text-inverse: #0f172a;

    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);
    --divider: rgba(148, 163, 184, .2);

    --accent: #8b5cf6;
    --accent-press: #7c3aed;
    --accent-light: #a78bfa;
    --accent-tint: rgba(139, 92, 246, .18);
    --accent-ink: #c4b5fd;
    --on-accent: #ffffff;

    --success: #34d399;
    --success-tint: rgba(52, 211, 153, .14);
    --success-ink: #a7f3d0;
    --warning: #fbbf24;
    --warning-tint: rgba(251, 191, 36, .14);
    --warning-ink: #fde68a;
    --danger: #fb7185;
    --danger-tint: rgba(251, 113, 133, .15);
    --danger-ink: #fecdd3;
    --info: #60a5fa;
    --info-tint: rgba(96, 165, 250, .15);
    --info-ink: #bfdbfe;

    --type-skip: #f87171;
    --type-skip-tint: rgba(248, 113, 113, .16);
    --type-skip-wash: #221a24;
    --type-skip-on: #fecaca;
    --type-roro: #38bdf8;
    --type-roro-tint: rgba(56, 189, 248, .16);
    --type-roro-wash: #132232;
    --type-roro-on: #bae6fd;
    --type-hiab: #fb923c;
    --type-hiab-tint: rgba(251, 146, 60, .16);
    --type-hiab-wash: #241d1f;
    --type-hiab-on: #fed7aa;
    --type-none: #7c879c;
    --type-none-tint: #1f2534;
    --type-none-wash: #161b28;
    --type-none-on: #a3adc2;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 -8px 32px rgba(0, 0, 0, .5);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);

    --shadow-ink: #000000;
    --theme-color: #0a0e1a; /* mirrored into meta[name=theme-color] by theme-manager.js */
}

/* ---------- Light (default) ---------- */
:root,
:root[data-scheme="light"] {
    color-scheme: light;

    --bg: #f5f6fa;
    --surface: #ffffff;
    --surface-2: #eef0f5;
    --surface-3: #e3e6ee;
    --overlay: rgba(255, 255, 255, .72);
    --scrim: rgba(15, 23, 42, .45);

    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #f8fafc;

    --border: rgba(15, 23, 42, .08);
    --border-strong: rgba(15, 23, 42, .16);
    --divider: rgba(15, 23, 42, .1);

    --accent: #7c3aed;
    --accent-press: #6d28d9;
    --accent-light: #8b5cf6;
    --accent-tint: #f1ebfe;
    --accent-ink: #5b21b6;
    --on-accent: #ffffff;

    --success: #059669;
    --success-tint: #e6f6ef;
    --success-ink: #065f46;
    --warning: #d97706;
    --warning-tint: #fdf3e1;
    --warning-ink: #92400e;
    --danger: #e11d48;
    --danger-tint: #fde8ed;
    --danger-ink: #9f1239;
    --info: #2563eb;
    --info-tint: #e8effd;
    --info-ink: #1e40af;

    --type-skip: #dc2626;
    --type-skip-tint: #fdecec;
    --type-skip-wash: #fff5f5;
    --type-skip-on: #991b1b;
    --type-roro: #0284c7;
    --type-roro-tint: #e3f2fa;
    --type-roro-wash: #f3f9fd;
    --type-roro-on: #075985;
    --type-hiab: #ea580c;
    --type-hiab-tint: #fdeee4;
    --type-hiab-wash: #fff7f2;
    --type-hiab-on: #9a3412;
    --type-none: #94a3b8;
    --type-none-tint: #eef0f5;
    --type-none-wash: #ffffff;
    --type-none-on: #475569;

    --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --shadow-2: 0 -8px 32px rgba(15, 23, 42, .16);
    --shadow-3: 0 12px 32px rgba(15, 23, 42, .22);

    --shadow-ink: #0f172a;
    --theme-color: #f5f6fa;
}

/* ---------- Type hook: <el data-type="skip|roro|hiab|none"> ----------
   Children use only var(--t), var(--t-tint), var(--t-wash), var(--t-on). */
[data-type="skip"] { --t: var(--type-skip); --t-tint: var(--type-skip-tint); --t-wash: var(--type-skip-wash); --t-on: var(--type-skip-on); }
[data-type="roro"] { --t: var(--type-roro); --t-tint: var(--type-roro-tint); --t-wash: var(--type-roro-wash); --t-on: var(--type-roro-on); }
[data-type="hiab"] { --t: var(--type-hiab); --t-tint: var(--type-hiab-tint); --t-wash: var(--type-hiab-wash); --t-on: var(--type-hiab-on); }
[data-type="none"] { --t: var(--type-none); --t-tint: var(--type-none-tint); --t-wash: var(--type-none-wash); --t-on: var(--type-none-on); }

/* ---------- Status hook: <el data-status="..."> sets --s (dot colour) ---------- */
[data-status="new"],
[data-status="collected"] { --s: var(--info); }
[data-status="in_progress"],
[data-status="awaiting_collection"],
[data-status="enquiry"] { --s: var(--warning); }
[data-status="delivered"],
[data-status="completed"] { --s: var(--success); }
[data-status="cancelled"] { --s: var(--danger); }