/* ==========================================================================
   M.O Group Auctions — Brand Design Tokens
   Source: mo_group_brand_foundation_v1.pdf + colours sampled from the logo master
   Layer 1 (primitive) → Layer 2 (semantic). Use the semantic layer in components.
   ========================================================================== */

:root {
  /* ---------- Layer 1: primitives — core palette ------------------------- */
  --mo-teal:        #026176;  /* primary brand teal — 7.06:1 on white, AA + AAA */
  --mo-teal-bright: #0F849B;  /* highlight / top of the logo gradient.
                                 NB: only 4.38:1 on white — LARGE TEXT (>=24px,
                                 or >=19px bold) and non-text accents only.
                                 Never use it for body copy. */
  --mo-teal-deep:   #024554;  /* deep teal, bottom of the gradient */
  --mo-charcoal:    #1C2628;  /* dark surface */
  --mo-black:       #050505;  /* rich black */
  --mo-gray:        #6E7275;  /* silver gray */

  /* Teal ramp, interpolated from the three brand teals (for states/tints) */
  --mo-teal-50:  #E8F3F6;
  --mo-teal-100: #C7E2E9;
  --mo-teal-200: #94C6D3;
  --mo-teal-300: #5CA6B9;
  --mo-teal-400: #2A8CA3;
  --mo-teal-500: #0F849B;
  --mo-teal-600: #026176;
  --mo-teal-700: #024554;
  --mo-teal-800: #01323D;
  --mo-teal-900: #011F26;

  /* Neutral ramp, tuned toward the charcoal (slightly cool) */
  --mo-neutral-0:   #FFFFFF;
  --mo-neutral-50:  #F7F8F8;
  --mo-neutral-100: #EDEFEF;
  --mo-neutral-200: #DCDFE0;
  --mo-neutral-300: #BFC4C5;
  --mo-neutral-400: #9AA0A2;
  --mo-neutral-500: #6E7275;
  --mo-neutral-600: #50585A;
  --mo-neutral-700: #333C3E;
  --mo-neutral-800: #1C2628;
  --mo-neutral-900: #0E1516;
  --mo-neutral-950: #050505;

  /* Status colours — chosen to sit beside the teal without clashing */
  --mo-success: #0E7C5A;
  --mo-warning: #B4791A;
  --mo-danger:  #B3261E;
  --mo-info:    var(--mo-teal-500);

  /* ---------- Layer 1: primitives — gradients ---------------------------- */
  /* The logo's "M" gradient runs bright teal (top-left) → deep teal (bottom) */
  --mo-gradient-brand:  linear-gradient(160deg, #0F849B 0%, #026176 45%, #012B35 100%);
  --mo-gradient-metal:  linear-gradient(145deg, #6E7275 0%, #2A3133 40%, #050505 100%);
  --mo-gradient-surface: linear-gradient(180deg, #024554 0%, #1C2628 100%);

  /* ---------- Layer 1: primitives — typography -------------------------- */
  /* Guidelines: Arabic = Cairo / Noto Sans Arabic. Latin = Montserrat (UI),
     Rajdhani (technical/numeric accents, matches the "GROUP" wordmark). */
  --mo-font-ar:      "Cairo", "Noto Sans Arabic", system-ui, sans-serif;
  --mo-font-en:      "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mo-font-accent:  "Rajdhani", "Montserrat", sans-serif;
  --mo-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Type scale — 1.250 major third, 16px base */
  --mo-text-xs:   0.75rem;   /* 12 */
  --mo-text-sm:   0.875rem;  /* 14 */
  --mo-text-base: 1rem;      /* 16 */
  --mo-text-lg:   1.25rem;   /* 20 */
  --mo-text-xl:   1.5625rem; /* 25 */
  --mo-text-2xl:  1.953rem;  /* 31 */
  --mo-text-3xl:  2.441rem;  /* 39 */
  --mo-text-4xl:  3.052rem;  /* 49 */
  --mo-text-5xl:  3.815rem;  /* 61 */

  --mo-leading-tight: 1.2;
  --mo-leading-snug:  1.4;
  --mo-leading-normal: 1.6;
  --mo-leading-loose: 1.85;  /* Arabic body copy needs more room */

  --mo-tracking-wide: 0.08em;
  --mo-tracking-wider: 0.18em; /* the "A U C T I O N S" lockup treatment */

  /* ---------- Layer 1: primitives — space / radius / elevation ---------- */
  --mo-space-1: 0.25rem;  --mo-space-2: 0.5rem;   --mo-space-3: 0.75rem;
  --mo-space-4: 1rem;     --mo-space-5: 1.5rem;   --mo-space-6: 2rem;
  --mo-space-7: 3rem;     --mo-space-8: 4rem;     --mo-space-9: 6rem;
  --mo-space-10: 8rem;

  --mo-radius-sm: 4px;  --mo-radius-md: 8px;   --mo-radius-lg: 14px;
  --mo-radius-xl: 22px; --mo-radius-full: 999px;

  --mo-shadow-sm: 0 1px 2px rgba(5, 5, 5, 0.06), 0 1px 3px rgba(5, 5, 5, 0.08);
  --mo-shadow-md: 0 4px 10px rgba(5, 5, 5, 0.08), 0 2px 4px rgba(5, 5, 5, 0.06);
  --mo-shadow-lg: 0 12px 28px rgba(2, 69, 84, 0.14), 0 4px 10px rgba(5, 5, 5, 0.08);
  --mo-shadow-teal: 0 8px 24px rgba(2, 97, 118, 0.28);

  --mo-container: 1200px;
  --mo-container-wide: 1440px;

  /* ---------- Layer 2: semantic — light theme (default) ----------------- */
  --color-bg:            var(--mo-neutral-0);
  --color-bg-subtle:     var(--mo-neutral-50);
  --color-bg-muted:      var(--mo-neutral-100);
  --color-surface:       var(--mo-neutral-0);
  --color-surface-raised: var(--mo-neutral-0);
  --color-border:        var(--mo-neutral-200);
  --color-border-strong: var(--mo-neutral-300);

  --color-text:          var(--mo-neutral-900);
  --color-text-muted:    var(--mo-neutral-600);
  --color-text-subtle:   var(--mo-neutral-500);
  --color-text-inverse:  var(--mo-neutral-0);

  --color-primary:        var(--mo-teal-600);
  --color-primary-hover:  var(--mo-teal-700);
  --color-primary-active: var(--mo-teal-800);
  --color-primary-subtle: var(--mo-teal-50);
  --color-on-primary:     var(--mo-neutral-0);

  --color-accent:        var(--mo-teal-500);
  --color-focus-ring:    var(--mo-teal-500);

  /* Logo asset to use on the current background */
  --logo-primary: url("./logo/logo-full-color-400w.png");
  --logo-symbol:  url("./logo/symbol-color-240w.png");
}

/* ---------- Layer 2: semantic — dark theme ------------------------------ */
:root[data-theme="dark"],
:root.dark {
  --color-bg:            var(--mo-neutral-950);
  --color-bg-subtle:     var(--mo-neutral-900);
  --color-bg-muted:      var(--mo-neutral-800);
  --color-surface:       var(--mo-neutral-800);
  --color-surface-raised: #253032;
  --color-border:        #2E393B;
  --color-border-strong: #3F4A4C;

  --color-text:          var(--mo-neutral-50);
  --color-text-muted:    var(--mo-neutral-300);
  --color-text-subtle:   var(--mo-neutral-400);
  --color-text-inverse:  var(--mo-neutral-950);

  /* On dark surfaces the brand teal collapses (teal-600 on neutral-800 is only
     2.19:1). teal-300 is the lightest step that clears AA on every dark surface
     we use: 5.61:1 on neutral-800, 7.39:1 on neutral-950, 4.92:1 on raised. */
  --color-primary:        var(--mo-teal-300);
  --color-primary-hover:  var(--mo-teal-200);
  --color-primary-active: var(--mo-teal-100);
  --color-primary-subtle: rgba(15, 132, 155, 0.16);
  --color-on-primary:     var(--mo-neutral-950);   /* 7.39:1 on teal-300 */

  --color-accent:        var(--mo-teal-300);
  --color-focus-ring:    var(--mo-teal-300);

  --logo-primary: url("./logo/logo-full-white-400w.png");
  --logo-symbol:  url("./logo/symbol-white-240w.png");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            var(--mo-neutral-950);
    --color-bg-subtle:     var(--mo-neutral-900);
    --color-bg-muted:      var(--mo-neutral-800);
    --color-surface:       var(--mo-neutral-800);
    --color-surface-raised: #253032;
    --color-border:        #2E393B;
    --color-border-strong: #3F4A4C;

    --color-text:          var(--mo-neutral-50);
    --color-text-muted:    var(--mo-neutral-300);
    --color-text-subtle:   var(--mo-neutral-400);
    --color-text-inverse:  var(--mo-neutral-950);

    --color-primary:        var(--mo-teal-300);
    --color-primary-hover:  var(--mo-teal-200);
    --color-primary-active: var(--mo-teal-100);
    --color-primary-subtle: rgba(15, 132, 155, 0.16);
    --color-on-primary:     var(--mo-neutral-950);

    --color-accent:        var(--mo-teal-300);
    --color-focus-ring:    var(--mo-teal-300);

    --logo-primary: url("./logo/logo-full-white-400w.png");
    --logo-symbol:  url("./logo/symbol-white-240w.png");
  }
}

/* ---------- RTL / Arabic defaults --------------------------------------- */
[dir="rtl"] {
  --mo-font-body: var(--mo-font-ar);
  line-height: var(--mo-leading-loose);
}
[dir="ltr"] {
  --mo-font-body: var(--mo-font-en);
}

/* ---------- Logo clear space -------------------------------------------
   Guideline: X = 1/4 of the symbol height; keep X clear on all sides.
   Minimum sizes: full logo 150px, icon 32px (digital).
   ---------------------------------------------------------------------- */
.mo-logo {
  display: block;
  padding: calc(var(--mo-logo-h, 40px) / 4);
  min-width: 150px;
}
.mo-logo--icon { min-width: 32px; }