/* =====================================================================
 * tokens.css — single source of truth for color, spacing, radius, shadow,
 * and motion across the portal + all embedded tools.
 *
 * Every tool links this file:
 *   <link rel="stylesheet" href="../RefrigerationPartnerPortal/css/tokens.css">
 *
 * Tools may still declare their own :root vars for legacy reasons — those
 * cascade BELOW this file when the link is placed before the <style> block
 * in each tool's head. Use these tokens instead of literal hex / px values
 * for any new CSS so the design stays cohesive.
 * =====================================================================*/

:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

    /* --- color: slate scale (matches Tailwind for easy memory) ---------- */
    --color-slate-950: #020617;
    --color-slate-900: #0f172a;
    --color-slate-800: #1e293b;
    --color-slate-700: #334155;
    --color-slate-600: #475569;
    --color-slate-500: #64748b;
    --color-slate-400: #94a3b8;
    --color-slate-300: #cbd5e1;
    --color-slate-200: #e2e8f0;
    --color-slate-100: #f1f5f9;
    --color-slate-50:  #f8fafc;
    --color-white:     #ffffff;

    /* --- color: accent + status --------------------------------------- */
    --color-accent:        #38bdf8;  /* sky-400 — primary brand accent */
    --color-accent-strong: #0ea5e9;  /* sky-500 — hover / pressed */
    --color-accent-soft:   rgba(56,189,248,0.12);
    --color-success:       #22c55e;
    --color-success-soft:  rgba(34,197,94,0.12);
    --color-warning:       #fb923c;
    --color-warning-soft:  rgba(251,146,60,0.12);
    --color-danger:        #f87171;
    --color-danger-soft:   rgba(248,113,113,0.12);

    /* --- color: surface (dark theme is the default) ------------------- */
    --bg-app:        var(--color-slate-900);    /* body */
    --bg-surface:    var(--color-slate-800);    /* header / elevated bars */
    --bg-card:       rgba(30,41,59,0.5);        /* section cards on body */
    --bg-input:      var(--color-slate-900);    /* form fields */
    --bg-overlay:    rgba(15,23,42,0.92);       /* sidebars / popovers */

    --text-strong:   var(--color-slate-100);    /* headings */
    --text-default:  var(--color-slate-200);    /* body copy */
    --text-muted:    var(--color-slate-400);    /* secondary copy */
    --text-dim:      var(--color-slate-500);    /* tertiary / labels */

    --border-default: var(--color-slate-700);
    --border-strong:  var(--color-slate-600);
    --border-soft:    rgba(51,65,85,0.4);

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

    /* --- radii -------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* --- shadows ------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.18);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.18), 0 2px 4px -2px rgba(0,0,0,0.14);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);

    /* --- canonical heights (use these to keep bars aligned) ----------- */
    --h-top-bar:  56px;   /* .mfr-header / header.top / .header */
    --h-back-bar: 44px;   /* .mfr-back-bar / .ctr-tool-frame-bar */

    /* --- z-index scale ------------------------------------------------ */
    --z-sticky:  10;
    --z-overlay: 50;
    --z-modal:   100;
    --z-toast:   200;
}

/* Light-theme overrides. Tools opt in by setting class="theme-light" on
   <html>; the portal's existing AppTheme toggle handles that.            */
html.theme-light {
    --bg-app:        var(--color-slate-50);
    --bg-surface:    var(--color-white);
    --bg-card:       var(--color-white);
    --bg-input:      var(--color-white);
    --bg-overlay:    var(--color-white);

    --text-strong:   var(--color-slate-900);
    --text-default:  var(--color-slate-900);
    --text-muted:    var(--color-slate-600);
    --text-dim:      var(--color-slate-500);

    --border-default: var(--color-slate-300);
    --border-strong:  var(--color-slate-400);
    --border-soft:    rgba(203,213,225,0.6);

    --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
    --shadow-md: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-lg: 0 8px 24px rgba(15,23,42,0.10);
}

html,
body {
    font-family: var(--font-sans);
}