/*
 * Tfastunlocker design tokens.
 *
 * GSM Technician Dark Charcoal & Amber Gold Palette matching UnlockTool & TFastUnlocker Home Page.
 * Default theme is dark slate/charcoal (#0b0f19 / #111827) with high-contrast gold (#f59e0b).
 */

:root {
    /* Brand Hue: Amber Gold (H: 38, S: 92%, L: 50% = #f59e0b) */
    --tf-h: var(--base-h, 38);
    --tf-s: var(--base-s, 92%);
    --tf-l: var(--base-l, 50%);

    /* Neutrals stay close to grey */
    --tf-s-surface: min(var(--tf-s), 30%);
    --tf-s-text: min(var(--tf-s), 14%);

    /* ---- Brand Named Tokens ---- */
    --tf-gold: #f59e0b;
    --tf-gold-dark: #d97706;
    --tf-gold-bright: #fbbf24;
    --tf-yellow: #ffc107;
    --tf-orange: #ff5722;
    --tf-orange-bright: #ff6b00;

    /* ---- Accent ramp (Amber / Gold) ---- */
    --tf-accent: #f59e0b;
    --tf-accent-deep: #d97706;
    --tf-accent-bright: #fbbf24;
    --tf-accent-soft: rgba(245, 158, 11, 0.14);
    --tf-accent-line: rgba(245, 158, 11, 0.25);

    --tf-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --tf-gradient-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --tf-gradient-orange: linear-gradient(135deg, #ff5722 0%, #ff6b00 100%);

    /* ---- Surfaces (Default: Professional Dark Charcoal / Slate) ---- */
    --tf-bg: #0b0f19;
    --tf-bg-2: #0f172a;
    --tf-surface: #111827;
    --tf-surface-2: #1e293b;
    --tf-surface-hover: #26354a;
    --tf-border: rgba(255, 255, 255, 0.08);
    --tf-border-strong: rgba(245, 158, 11, 0.35);

    /* ---- Ink (High Contrast Legibility) ---- */
    --tf-strong: #ffffff;
    --tf-text: #f1f5f9;
    --tf-prose: #cbd5e1;
    --tf-muted: #94a3b8;
    --tf-on-accent: #0b0f19;

    /* ---- Status ---- */
    --tf-ok: #10b981;
    --tf-ok-bg: rgba(16, 185, 129, 0.14);
    --tf-warn: #f59e0b;
    --tf-warn-bg: rgba(245, 158, 11, 0.14);
    --tf-bad: #ef4444;
    --tf-bad-bg: rgba(239, 68, 68, 0.14);
    --tf-info: #0ea5e9;
    --tf-info-bg: rgba(14, 165, 233, 0.14);

    /* ---- Depth ---- */
    --tf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --tf-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 34px rgba(0, 0, 0, 0.6);
    --tf-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
    --tf-glow: 0 6px 20px rgba(245, 158, 11, 0.35);
    --tf-glow-orange: 0 6px 20px rgba(255, 87, 34, 0.3);

    /* ---- Geometry ---- */
    --tf-radius-sm: .5rem;
    --tf-radius: .75rem;
    --tf-radius-lg: 1rem;
    --tf-radius-xl: 1.35rem;
    --tf-pill: 999px;

    /* Spacing scale */
    --tf-1: .25rem;
    --tf-2: .5rem;
    --tf-3: .75rem;
    --tf-4: 1rem;
    --tf-5: 1.5rem;
    --tf-6: 2rem;
    --tf-7: 3rem;
    --tf-8: 5rem;

    --tf-container: 1180px;
    --tf-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tf-mono: ui-monospace, 'JetBrains Mono', Consolas, monospace;

    --tf-ease: cubic-bezier(.4, 0, .2, 1);

    color-scheme: dark;
}

/* Explicit Dark Theme matches :root */
[data-theme="dark"] {
    --tf-accent: #f59e0b;
    --tf-accent-deep: #d97706;
    --tf-accent-bright: #fbbf24;
    --tf-accent-soft: rgba(245, 158, 11, 0.14);
    --tf-accent-line: rgba(245, 158, 11, 0.25);

    --tf-bg: #0b0f19;
    --tf-bg-2: #0f172a;
    --tf-surface: #111827;
    --tf-surface-2: #1e293b;
    --tf-surface-hover: #26354a;
    --tf-border: rgba(255, 255, 255, 0.08);
    --tf-border-strong: rgba(245, 158, 11, 0.35);

    --tf-strong: #ffffff;
    --tf-text: #f1f5f9;
    --tf-prose: #cbd5e1;
    --tf-muted: #94a3b8;
    --tf-on-accent: #0b0f19;

    color-scheme: dark;
}

/* Light Theme (only applied if explicitly selected) */
[data-theme="light"] {
    --tf-accent: #d97706;
    --tf-accent-deep: #b45309;
    --tf-accent-bright: #f59e0b;
    --tf-accent-soft: rgba(217, 119, 6, 0.1);
    --tf-accent-line: rgba(217, 119, 6, 0.22);

    --tf-bg: #f8fafc;
    --tf-bg-2: #f1f5f9;
    --tf-surface: #ffffff;
    --tf-surface-2: #f8fafc;
    --tf-surface-hover: #edf2f7;
    --tf-border: #e2e8f0;
    --tf-border-strong: rgba(217, 119, 6, 0.4);

    --tf-strong: #0f172a;
    --tf-text: #1e293b;
    --tf-prose: #475569;
    --tf-muted: #64748b;
    --tf-on-accent: #ffffff;

    --tf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --tf-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --tf-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.12);
    --tf-glow: 0 6px 20px rgba(217, 119, 6, 0.25);

    color-scheme: light;
}