/* ==========================================================================
   DealSquad — Design Tokens (light only)
   Direction: the 2026 brand guidelines — dark-teal structure and typography,
   clean cool-white surfaces, amber for brand elements and tier state,
   persimmon for buttons, links and active states, deep teal for secondary
   surfaces. Every value used anywhere in the product resolves from this file.
   Light mode only — there is no dark theme and no [data-theme] selector.
   ========================================================================== */

:root {
  /* --- Brand (from the guideline palette, fixed) ------------------------ */
  --brand-amber:       #FBB034; /* primary 25% — brand elements, sections, cards */
  --brand-golden:      #F99D1C; /* highlights 15% */
  --brand-persimmon:   #F47920; /* accent 15% — buttons, icons, links, active states */
  --brand-teal:        #105151; /* secondary 20% — light backgrounds, containers */
  --brand-teal-dark:   #024242; /* background 20% — logo, headings, nav, footer */
  --brand-gradient:    linear-gradient(135deg, #FBB034 0%, #105151 100%);

  /* Legacy aliases every component still reads. */
  --brand-navy:        var(--brand-teal-dark);
  --brand-navy-2:      var(--brand-teal);
  --brand-red:         var(--brand-persimmon);
  --brand-red-2:       #DD6410;
  --brand-gold:        var(--brand-amber);
  --brand-gold-2:      var(--brand-golden);
  --brand-cream:       #F5F9F8;
  --brand-whatsapp:    #25D366;

  /* --- Cool neutral ramp, light ------------------------------------------ */
  --n-0:   #FFFFFF;
  --n-50:  #F4F8F7;
  --n-100: #E9F0EF;
  --n-200: #D8E3E1;
  --n-300: #BFCECC;
  --n-400: #9CB0AD;
  --n-500: #6F8683;
  --n-600: #526866;
  --n-700: #3A4E4C;
  --n-800: #223433;
  --n-900: #0F1F1E;

  /* --- Semantic surfaces ------------------------------------------------ */
  --bg:              var(--n-50);
  --bg-inset:        var(--n-100);
  --surface:         var(--n-0);
  --surface-2:       var(--n-50);
  --surface-sunken:  var(--n-100);
  --surface-inverse: var(--brand-teal-dark);

  --border:          #DCE6E4;
  --border-strong:   var(--n-300);
  --border-focus:    var(--brand-amber);
  --rule:            var(--brand-amber);

  /* --- Semantic text ---------------------------------------------------- */
  --text:            var(--brand-teal-dark);
  --text-secondary:  var(--n-700);
  --text-muted:      var(--n-600); /* n-500 sat at 3.9:1 on white; n-600 clears AA on every surface */
  --text-subtle:     var(--n-500);
  --text-inverse:    var(--brand-cream);
  --text-on-action:  var(--n-900); /* teal-dark was 4.1:1 on persimmon; the near-black teal reads at 6:1 */

  /* --- Roles ------------------------------------------------------------ */
  --action:          var(--brand-persimmon);
  --action-hover:    var(--brand-red-2);
  --action-soft:     #FDEEE2;
  --action-ink:      #C4570A; /* persimmon, darkened so link text passes contrast */

  --structure:       var(--brand-teal-dark);
  --structure-hover: var(--brand-teal);
  --structure-soft:  #E4F0EE;

  --tier:            var(--brand-amber);
  --tier-ink:        #7A4F00;
  --tier-soft:       #FFF4DE;
  --tier-border:     #FBD68A;

  /* --- Status ----------------------------------------------------------- */
  --success:      #1C7A3E;
  --success-soft: #E7F5EC;
  --success-border:#BFE3CD;
  --warning:      #8A5600; /* was #A66A00 — 4.0:1 on its soft tint; now 5.6:1 */
  --warning-soft: #FDF2DE;
  --warning-border:#EFD9A9;
  --danger:       #B3261E;
  --danger-soft:  #FBEAE8;
  --danger-border:#F0C7C3;
  --info:         var(--brand-teal);
  --info-soft:    #E4F0EE;
  --info-border:  #BFD9D5;
  --neutral-soft: var(--n-100);

  /* --- Type ------------------------------------------------------------- */
  --font-display: Bahnschrift, "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      Aller, "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  --fs-11: 0.75rem;   /* readability floor: nothing on the platform renders below 12px */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-21: 1.3125rem;
  --fs-26: 1.625rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-52: 3.25rem;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --ls-display: 0;
  --ls-heading: 0.005em;
  --ls-body:    0em;
  --ls-caps:    0.09em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* --- Space (4pt) ------------------------------------------------------ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* --- Radii (soft scale) ----------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-full: 999px;

  /* --- Elevation: layered, hairline-first ------------------------------- */
  --e-0: none;
  --e-1: 0 1px 1px rgba(2,66,66,.04), 0 2px 6px rgba(2,66,66,.04);
  --e-2: 0 1px 2px rgba(2,66,66,.05), 0 4px 12px rgba(2,66,66,.06);
  --e-3: 0 2px 4px rgba(2,66,66,.06), 0 10px 28px rgba(2,66,66,.09);
  --e-4: 0 4px 8px rgba(2,66,66,.07), 0 22px 54px rgba(2,66,66,.13);
  --e-focus: 0 0 0 3px rgba(251,176,52,.45);
  --e-inset: inset 0 1px 2px rgba(2,66,66,.05);

  /* --- Motion ------------------------------------------------------------ */
  --dur-instant: 90ms;
  --dur-fast:    150ms;
  --dur:         200ms;
  --dur-slow:    280ms;
  --ease:        cubic-bezier(.2,.7,.3,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* --- Z index ----------------------------------------------------------- */
  --z-base: 0;   --z-sticky: 50;  --z-header: 100; --z-drawer: 200;
  --z-modal: 300; --z-toast: 400; --z-dev: 500;

  /* --- Layout ------------------------------------------------------------ */
  --shell-max:    1440px;
  --content-max:  1120px;
  --prose-max:    68ch;
  --mobile-max:   520px;
  --sidebar-w:    248px;
  --sidebar-w-collapsed: 68px;
  --header-h:     60px;
  --tap-min:      44px;

  color-scheme: light;
}