/**
 * style.css — Glimly design tokens
 *
 * Single source of truth for colors, shadows, and radii.
 * Contains ONLY :root custom properties — no reset, no element styles.
 * Each page links this file and keeps its own layout/component styles inline.
 */

:root {
    /* ── Landing-page semantic names (canonical) ───────────────────────── */
    --ink:          #0f172a;
    --ink-soft:     #475569;
    --ink-muted:    #94a3b8;
    --surface:      #ffffff;
    --surface-soft: #f8fafc;
    --line:         #e2e8f0;
    --accent:       #0ea5e9;
    --accent-hover: #0284c7;
    --accent-soft:  #e0f2fe;

    /* ── Status colors ─────────────────────────────────────────────────── */
    --success:      #10b981;
    --success-dark: #059669;
    --warning:      #f59e0b;
    --warning-dark: #d97706;
    --danger:       #ef4444;
    --danger-dark:  #991b1b;

    /* ── Status badge palette ──────────────────────────────────────────── */
    --status-q-bg:    #dbeafe;   /* queued / processing */
    --status-q-fg:    #1d4ed8;
    --status-ok-bg:   #d1fae5;   /* complete / done */
    --status-ok-fg:   #065f46;
    --status-err-bg:  #fee2e2;   /* failed / error */
    --status-err-fg:  #991b1b;
    --status-warn-bg: #fef3c7;   /* ready / warning */
    --status-warn-fg: #92400e;

    /* ── App-compat aliases ────────────────────────────────────────────── */
    --primary:       var(--accent);
    --primary-dark:  var(--accent-hover);
    --primary-light: #38bdf8;
    --secondary:     var(--success);
    --secondary-dark:var(--success-dark);

    /* ── Gray scale (Tailwind Slate) ───────────────────────────────────── */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* ── Shadows ───────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --radius-sm: 0.375rem;
    --radius:    0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
}