/* ============================================================
   MegaTech ERP — Design Tokens
   Colors · Type · Spacing · Radii · Shadows · Motion
   ============================================================ */

/* ---- Font faces (brand files) ---- */
@font-face {
  font-family: "Arial Brand";
  src: url("fonts/arial.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cairo Brand";
  src: url("fonts/cairoblack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Cairo supplemental weights from Google (user only provided Black 900) */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand colors (sampled from logo) ---------- */
  --brand-navy:        #0B2A6B;   /* deep brand tone, headers, sidebars */
  --brand-primary:     #034BB8;   /* DOMINANT logo blue — primary actions */
  --brand-primary-600: #0456D0;
  --brand-primary-500: #026EC4;   /* secondary logo blue */
  --brand-primary-400: #3B8AE2;
  --brand-primary-200: #B9D4F5;
  --brand-primary-100: #E3EEFB;
  --brand-primary-050: #F2F7FD;
  --brand-ink:         #030303;   /* "Tech" wordmark black */

  /* ---------- Neutral ramp (cool slate, reads enterprise) ---------- */
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-150: #EDF1F7;
  --slate-100: #F1F5F9;
  --slate-050: #F8FAFC;
  --white:     #FFFFFF;

  /* ---------- Semantic (status) ---------- */
  --success:     #16A34A;
  --success-bg:  #DCFCE7;
  --success-fg:  #14532D;

  --warning:     #F59E0B;
  --warning-bg:  #FEF3C7;
  --warning-fg:  #78350F;

  --danger:      #DC2626;
  --danger-bg:   #FEE2E2;
  --danger-fg:   #7F1D1D;

  --info:        #0EA5E9;
  --info-bg:     #E0F2FE;
  --info-fg:     #0C4A6E;

  /* Restaurant-specific status tokens */
  --status-new:       var(--info);        /* new order */
  --status-preparing: var(--warning);      /* kitchen working */
  --status-ready:     var(--success);      /* ready for pickup */
  --status-served:    var(--slate-500);    /* done */
  --status-delayed:   var(--danger);       /* over time */
  --status-reserved:  #8B5CF6;             /* violet for reservations */

  /* ---------- Semantic surface / foreground ---------- */
  --bg:         var(--slate-050);
  --bg-raised: var(--white);
  --bg-sunken: var(--slate-100);

  --fg1: var(--slate-900);   /* primary text */
  --fg2: var(--slate-700);   /* secondary text */
  --fg3: var(--slate-500);   /* tertiary, captions */
  --fg4: var(--slate-400);   /* disabled, placeholders */
  --fg-on-brand: var(--white);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-brand:  var(--brand-primary);

  /* ---------- Typography ---------- */
  --font-sans:  "Arial Brand", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-arabic: "Cairo Brand", "Cairo", "Arial Brand", sans-serif;
  --font-display: "Cairo Brand", "Arial Brand", Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", Menlo, monospace;

  /* Type scale (modular, 8pt grid friendly) */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;    /* default body */
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

  /* ---------- Spacing (4pt base, 8pt rhythm) ---------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   6px;     /* inputs */
  --r-md:   8px;     /* buttons, chips */
  --r-lg:   10px;    /* default */
  --r-xl:   14px;    /* cards */
  --r-2xl:  20px;    /* large panels */
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  /* Enterprise: subtle, low-spread, single-light */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --shadow-focus: 0 0 0 3px rgba(3, 75, 184, 0.22);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.22);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;

  /* ---------- Z-layers ---------- */
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* ---------- Dark theme (KDS, optional overall dark) ---------- */
[data-theme="dark"] {
  --bg:        #0A1220;
  --bg-raised: #121C30;
  --bg-sunken: #070D17;

  --fg1: #F1F5F9;
  --fg2: #CBD5E1;
  --fg3: #94A3B8;
  --fg4: #64748B;

  --border:        #1E293B;
  --border-strong: #334155;

  --brand-primary-100: rgba(3, 75, 184, 0.18);

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.55);
  --shadow-md: 0 6px 14px -4px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 30px -10px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   Semantic type classes — use these, not the scale directly
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg1); background: var(--bg); }
html[lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); }

body { font: var(--fw-regular) var(--text-md)/var(--lh-normal) var(--font-sans); color: var(--fg1); }

/* Display (hero slides, marketing) */
.display-xl { font: var(--fw-black) var(--text-6xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.display-lg { font: var(--fw-black) var(--text-5xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.display-md { font: var(--fw-black) var(--text-4xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }

/* Headings (UI) */
.h1, h1 { font: var(--fw-bold) var(--text-3xl)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg1); margin: 0; }
.h2, h2 { font: var(--fw-bold) var(--text-2xl)/var(--lh-snug) var(--font-sans); color: var(--fg1); margin: 0; }
.h3, h3 { font: var(--fw-bold) var(--text-xl)/var(--lh-snug) var(--font-sans); color: var(--fg1); margin: 0; }
.h4, h4 { font: var(--fw-semi) var(--text-lg)/var(--lh-snug) var(--font-sans); color: var(--fg1); margin: 0; }
.h5, h5 { font: var(--fw-semi) var(--text-base)/var(--lh-snug) var(--font-sans); color: var(--fg1); margin: 0; }

/* Body */
.body-lg { font: var(--fw-regular) var(--text-lg)/var(--lh-normal) var(--font-sans); color: var(--fg1); }
.body-md, p { font: var(--fw-regular) var(--text-md)/var(--lh-normal) var(--font-sans); color: var(--fg1); margin: 0; }
.body-sm { font: var(--fw-regular) var(--text-sm)/var(--lh-normal) var(--font-sans); color: var(--fg2); }

/* Supporting */
.caption   { font: var(--fw-regular) var(--text-xs)/var(--lh-normal) var(--font-sans); color: var(--fg3); }
.overline  { font: var(--fw-semi) var(--text-2xs)/1.2 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg3); }
.label     { font: var(--fw-medium) var(--text-sm)/var(--lh-snug) var(--font-sans); color: var(--fg2); }
.mono, code, kbd { font: var(--fw-medium) var(--text-sm)/var(--lh-normal) var(--font-mono); color: var(--fg1); }
.num-tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Focus ring */
*:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }