/* ============================================================
   TAWSELO DESIGN TOKENS · v1.0
   Source of truth: docs/brand/tawselo-brand-book.html (Brand Book v1.0)
                  + docs/design-system/tawselo-design-system.html
   Documentation:  docs/DESIGN_SYSTEM.md
   ------------------------------------------------------------
   Pure custom-property definitions — loading this file changes
   nothing visually until a component references a token.
   Never hardcode a brand value in a view; reference these vars.
   ============================================================ */

:root {
  /* ---- Brand · Tawselo Orange ------------------------------ */
  --color-orange-50:  #FFF1EA;
  --color-orange-200: #FFD8C4;
  --color-orange-400: #FF8A5B;
  --color-orange-500: #FF4D0D;   /* Tawselo Orange — primary action */
  --color-orange-700: #C93A08;   /* AA-safe orange text on white (4.9:1) */

  /* ---- Brand · Deep Navy ----------------------------------- */
  --color-navy-50:  #E9EDF4;
  --color-navy-300: #8496B5;
  --color-navy-600: #2A4368;
  --color-navy-800: #0F2A52;
  --color-navy-900: #04142F;     /* Deep Navy — ink, headings, dark surfaces */

  /* ---- Neutrals -------------------------------------------- */
  --color-white:    #FFFFFF;
  --color-gray-50:  #F7F9FC;     /* app background */
  --color-gray-100: #F1F4F9;     /* subtle fills, disabled bg */
  --color-gray-200: #E4E9F1;     /* default border */
  --color-gray-300: #CBD5E1;     /* strong border, input border */
  --color-gray-400: #94A3B4;     /* faint text, placeholders */
  --color-gray-500: #64748B;     /* muted text */
  --color-gray-700: #33415C;     /* secondary body text */

  /* ---- Semantic states ------------------------------------- */
  --color-success:      #128A50; /* Paid · Ready · Online */
  --color-success-text: #0E6E40;
  --color-success-bg:   #E6F6EC;
  --color-warning:      #C77A0A; /* Delayed · Busy */
  --color-warning-text: #8A5605;
  --color-warning-bg:   #FCF1DD;
  --color-danger:       #E5342B; /* Failed · destructive actions */
  --color-danger-text:  #B4231C;
  --color-danger-bg:    #FDECEA;
  --color-info:         #2563EB; /* Syncing · informational */
  --color-info-text:    #1D4ED8;
  --color-info-bg:      #E8EFFD;

  /* ---- Semantic aliases (use these in components) ----------- */
  --color-action:        var(--color-orange-500);
  --color-action-hover:  #E5430A;
  --color-action-tint:   var(--color-orange-50);
  --color-ink:           var(--color-navy-900);  /* headings, primary text */
  --color-body:          var(--color-gray-700);  /* long-form body copy */
  --color-muted:         var(--color-gray-500);
  --color-faint:         var(--color-gray-400);
  --color-link:          var(--color-orange-700); /* orange text on white must be Orange 700 */
  --color-link-hover:    #E5430A;
  --color-bg:            var(--color-gray-50);
  --color-surface:       var(--color-white);
  --color-border:        var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-selection:     #FFD9C4;

  /* ---- Dark service surfaces (POS · KDS) -------------------- */
  --color-dark-bg:        #0E1B2E;
  --color-dark-card:      #16233A;
  --color-dark-line:      #2C4064;
  --color-dark-line-hi:   #3A4E71;
  --color-dark-border:    #1D3358;
  --color-dark-divider:   #16294A;
  --color-dark-text:      #DDE6F2;
  --color-dark-muted:     #8FA2C2;
  --color-dark-nav:       #9DB0CE;
  --color-dark-nav-icon:  #6E82A6;
  --color-dark-faint:     #5E7099;
  --color-on-dark-body:   #AEBCD6;
  --color-orange-on-dark: #FF7A45; /* overlines/eyebrows on navy */
  --color-danger-on-dark: #FCA5A5; /* danger text on navy (PIN/lock errors) — AA on dark chrome */

  /* ---- Typography ------------------------------------------ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  /* Arabic-script extension (not covered by Brand Book v1.0 —
     Cairo is the established Tawselo Arabic companion face): */
  --font-sans-arabic: 'Cairo', 'Inter', system-ui, sans-serif;

  /* Type scale: size / weight / tracking (line-height in comment) */
  --text-display-size: 48px;  --text-display-weight: 800; --text-display-tracking: -0.03em;  /* lh 1.05, up to 56px hero */
  --text-h1-size: 34px;       --text-h1-weight: 800;      --text-h1-tracking: -0.02em;       /* lh 1.1 */
  --text-h2-size: 26px;       --text-h2-weight: 700;      --text-h2-tracking: -0.01em;       /* lh 1.15 */
  --text-h3-size: 20px;       --text-h3-weight: 700;      --text-h3-tracking: 0;             /* lh 1.2 */
  --text-title-size: 16px;    --text-title-weight: 600;                                      /* UI labels */
  --text-body-size: 15px;     --text-body-weight: 400;    --text-body-line: 1.6;             /* 15–16px long-form */
  --text-small-size: 13px;    --text-small-weight: 500;                                      /* helper & captions */
  --text-overline-size: 11px; --text-overline-weight: 700; --text-overline-tracking: 0.12em; /* uppercase eyebrow */
  --text-button-size: 15px;   --text-button-weight: 600;  --text-button-tracking: 0.01em;    /* sentence case, verb-first */

  /* ---- Spacing · 4px base ----------------------------------- */
  /* Steps: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Compose ALL padding & gaps from these. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Border radius ---------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;   /* default: buttons, inputs */
  --radius-lg: 14px;   /* cards */
  --radius-xl: 20px;   /* modals, large surfaces */
  --radius-full: 999px;

  /* ---- Elevation & shadow ------------------------------------ */
  --shadow-0: none;                                                        /* flat: border only */
  --shadow-1: 0 1px 2px rgba(4,20,47,.06), 0 4px 12px rgba(4,20,47,.06);  /* card */
  --shadow-2: 0 8px 24px rgba(4,20,47,.1);                                 /* popover, dropdown, toast */
  --shadow-3: 0 24px 60px rgba(4,20,47,.22);                               /* modal */
  --shadow-lift: 0 14px 30px rgba(4,20,47,.14);                            /* card hover lift */

  /* ---- Focus ------------------------------------------------- */
  --focus-ring: 0 0 0 4px rgba(255,77,13,.16);
  --focus-border: var(--color-orange-500);

  /* ---- Motion ------------------------------------------------ */
  /* Confirm, don't delay · enter soft, exit fast · one thing moves. */
  --motion-instant: 120ms;   /* micro: press, hover */
  --motion-base:    240ms;   /* UI transitions */
  --motion-enter:   400ms;   /* emphasis / enter */
  --motion-page:    500ms;   /* page transitions (fade + 8px rise) */
  --motion-exit:    160ms;   /* exits leave quicker */
  --ease-tawselo:  cubic-bezier(.22, 1, .36, 1);  /* default enter/exit */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);    /* moves & reflows */

  /* ---- Layout grid ------------------------------------------- */
  --layout-max: 1200px;   /* content max width (12-col grid) */
  --layout-gutter: 24px;  /* default gutter */
}