/* ==========================================================================
   MARZIMARKET — Design Tokens
   Single source of truth. Nothing below this file may hard-code a colour.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- brand */
  /* Brand ramp taken from the logo source (Claude Design, card 2a):
     tile #2b1fa8, bars #7c6cf6 and #a99cfa. Names kept so the semantic
     layer below and every component keep working unchanged. */
  --ami-indigo-50:  #EFECFD;
  --ami-indigo-100: #E2DCFB;
  --ami-indigo-200: #C9C0F7;
  --ami-indigo-400: #8B78F0;
  --ami-indigo-500: #5B45E0;
  --ami-indigo-600: #4936C4;
  --ami-indigo-700: #3A2AA0;

  /* ------------------------------------------------------- raw neutrals   */
  --ami-navy-900:   #1A1630;
  --ami-navy-800:   #241F3D;
  --ami-navy-700:   #2E284D;
  --ami-navy-600:   #3D3663;
  --ami-navy-500:   #5A3D2B;
  --ami-slate-500:  #8A7565;
  --ami-slate-400:  #A08A7A;
  --ami-slate-200:  #F0E2D6;
  --ami-slate-100:  #FBF1E9;
  --ami-slate-50:   #FFF7F2;
  --ami-white:      #FFFFFF;

  /* -------------------------------------------------------- raw semantics */
  --ami-green-500:  #5F7A3D;
  --ami-green-50:   #EEF1E4;
  --ami-amber-500:  #C97F3D;
  --ami-amber-50:   #FBE7D4;
  --ami-red-500:    #E8695F;
  --ami-red-50:     #FDEDEB;
  --ami-blue-500:   #8B78F0;
  --ami-blue-50:    #EDEAFC;
  --ami-purple-500: #B08BE0;
  --ami-purple-50:  #F4EDFB;

  /* ======================================================================
     SEMANTIC LAYER — components consume only these
     ====================================================================== */

  /* surfaces */
  --bg-app:          var(--ami-slate-50);
  --bg-app-alt:      #FDF3EC;
  --bg-surface:      var(--ami-white);
  --bg-surface-alt:  var(--ami-slate-100);
  --bg-sunken:       var(--ami-slate-100);
  --bg-row:          var(--ami-slate-50);
  --bg-hover:        rgba(91, 69, 224, .05);
  --bg-selected:     var(--ami-indigo-50);
  --bg-nav:          var(--ami-white);
  --bg-overlay:      rgba(90, 61, 43, .42);
  --bg-skeleton:     var(--ami-slate-100);
  --bg-skeleton-hi:  #F4E6DA;

  /* text */
  --text-primary:    var(--ami-navy-500);
  --text-secondary:  var(--ami-slate-500);
  --text-muted:      var(--ami-slate-400);
  --text-inverse:    var(--ami-white);
  --text-brand:      var(--ami-indigo-500);

  /* borders */
  --border:          var(--ami-slate-200);
  --border-strong:   #E9D9C9;
  --border-focus:    var(--ami-indigo-500);

  /* interactive / brand */
  --brand:           var(--ami-indigo-500);
  --brand-hover:     var(--ami-indigo-600);
  --brand-active:    var(--ami-indigo-700);
  --brand-soft:      var(--ami-indigo-50);
  --brand-on:        var(--ami-white);
  --accent:          var(--ami-indigo-400);

  /* status */
  --positive:        var(--ami-green-500);
  --positive-soft:   var(--ami-green-50);
  --warning:         var(--ami-amber-500);
  --warning-soft:    var(--ami-amber-50);
  --negative:        var(--ami-red-500);
  --negative-soft:   var(--ami-red-50);
  --info:            var(--ami-blue-500);
  --info-soft:       var(--ami-blue-50);
  --neutral:         var(--ami-slate-400);
  --neutral-soft:    var(--ami-slate-100);

  /* ---------------------------------------------------- handoff additions
     From the Niche Finder handoff (design_handoff_niche_finder). The palette
     already matched; these are the shades it uses that the semantic layer had
     no name for: a fainter text step, two lighter tracks, the violet tint used
     behind AI copy, and the two bar gradients. */
  --text-faint:      #C4AD9D;
  --border-soft:     #F5E8DB;
  --track:           #F4ECE3;
  --track-soft:      #FAF3EC;
  --brand-tint:      #F3EFFE;
  --brand-tint-line: #DED5FB;   /* a border on the tint (Smart Pricing recommended card) */
  --sim-line:        #F0CFB2;   /* the dashed frame of a simulation: not a result */
  --brand-ink:       #463A6B;
  --marzipan:        var(--ami-marzipan, #FBDFC4);
  --bar-earn:  linear-gradient(90deg, #8B78F0, #5B45E0);
  --bar-room:  linear-gradient(90deg, #A3C078, #7EA350);

  /* Status pairs for data tables (TABLE-GUIDELINES §5). They sit beside the
     global --positive/--warning/--negative rather than replacing them: the
     table guide fixes its own shades, and repointing the semantic tokens
     would move every badge in the product along with the table cells. */
  --st-pos-fg: #5F7A3D;  --st-pos-bg: #EEF1E4;
  --st-warn-fg:#C07B3A;  --st-warn-bg:#FDF0E3;
  --st-neg-fg: #C25668;  --st-neg-bg: #FBEAEA;
  /* Tinted columns of Marzi's assessment (design_handoff_similar_market):
     a softer wash than the status pill background and a deeper text step,
     so a paragraph reads on it where a pill would not. */
  --tone-pos-bg: #F6FAF0;  --tone-pos-fg: #3F5A26;  --tone-pos-icon: #7EA350;
  --tone-neg-bg: #FDF3F3;  --tone-neg-fg: #8F3D49;
  --st-flat-fg:#A08A7A;  --st-flat-bg:#F4ECE3;

  /* ------------------------------------------------------------------
     DATA SEMANTICS — a metric always keeps its colour, product-wide.
     ------------------------------------------------------------------ */
  --data-revenue:    var(--ami-indigo-500);  /* revenue / money        */
  --data-units:      var(--ami-blue-500);    /* units sold / volume    */
  --data-growth:     var(--ami-green-500);   /* growth / positive Δ    */
  --data-decline:    var(--ami-red-500);     /* decline / negative Δ   */
  --data-competition:var(--ami-amber-500);   /* competition pressure   */
  --data-forecast:   var(--ami-purple-500);  /* forecast / AI-derived  */
  --data-neutral:    var(--ami-slate-400);   /* inactive / n/a         */

  --data-revenue-soft:     rgba(91, 69, 224, .08);
  --data-units-soft:       rgba(139, 120, 240, .10);
  --data-growth-soft:      rgba(95, 122, 61, .10);
  --data-forecast-soft:    rgba(176, 139, 224, .12);
  --grid-line:             rgba(160, 138, 122, .22);
  --axis-line:             rgba(160, 138, 122, .38);

  /* donut / share ramp — restrained, max 6 slices */
  --share-1: #5B45E0;
  --share-2: #8B78F0;
  --share-3: #B08BE0;
  --share-4: #F6C9A8;
  --share-5: #FBDFC4;
  --share-6: #E9D9C9;

  /* ------------------------------------------------------------ type ---- */
  --font-sans: "Nunito", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Baloo 2", "Nunito", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --font-num:  "Nunito", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  --fs-display: 32px;  --lh-display: 40px;
  --fs-page:    28px;  --lh-page:    36px;
  --fs-section: 20px;  --lh-section: 28px;
  --fs-card:    15px;  --lh-card:    22px;
  --fs-body:    14px;  --lh-body:    22px;
  --fs-sm:      13px;  --lh-sm:      20px;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-micro:   11px;  --lh-micro:   14px;
  --fs-kpi:     30px;  --lh-kpi:     38px;
  --fs-kpi-lg:  36px;  --lh-kpi-lg:  44px;
  /* the one dominant number of a page (Smart Pricing's recommended price,
     handoff "Marzi Smart Pricing" 19.09.2026: 54 desktop / 42 phone) */
  --fs-hero:    54px;  --lh-hero:    58px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  /* Baloo 2 ships an 800 and the handoff leans on it for every heading and
     numeric value — without this weight the display font reads too soft. */
  --fw-black:   800;

  --tracking-label: .04em;   /* small uppercase labels only */
  --tracking-num:  -.01em;

  /* ---------------------------------------------------------- spacing --- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;

  --card-pad:      22px;
  --card-pad-sm:   16px;
  --section-gap:   32px;
  --grid-gap:      24px;
  --page-pad-x:    32px;
  --page-pad-y:    28px;

  /* ----------------------------------------------------------- radius --- */
  /* Radii from the Niche Finder handoff, applied product-wide: page cards 24,
     inner cards 20, table rows 14, rank tiles 12, pills 99. */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-row: 14px;
  --r-lg:  20px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ------------------------------------------------------------- blur --- */
  /* Put a table out of focus while its answer is still being collected: far
     enough that no figure can be misread as final, near enough that the shape
     of the table still reads as a table. */
  --blur-veil: 5px;

  /* ---------------------------------------------------------- shadows --- */
  --sh-xs: 0 1px 2px rgba(90, 61, 43, .05);
  --sh-sm: 0 2px 12px rgba(90, 61, 43, .08);
  --sh-md: 0 8px 24px rgba(90, 61, 43, .09);
  --sh-card: 0 4px 24px rgba(90, 61, 43, .08);   /* data-table card, per the table guide */
  --sh-lg: 0 18px 48px rgba(90, 61, 43, .13);
  --sh-focus: 0 0 0 3px rgba(91, 69, 224, .20);

  /* ------------------------------------------------------------ sizes --- */
  --h-control:   38px;
  --h-control-sm:32px;
  --h-row:       48px;
  --h-row-tight: 44px;
  --h-topbar:    64px;
  --w-sidebar:   256px;
  --w-sidebar-collapsed: 72px;

  /* ---------------------------------------------------------- motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 280ms;

  --z-sticky: 20;
  --z-dropdown: 40;
  --z-modal: 60;
  --z-toast: 80;
}

/* ==========================================================================
   DARK MODE — re-mapped, never a naive inversion.
   Semantic hues are preserved; only surfaces and text move.
   ========================================================================== */
:root[data-theme="dark"] {
  --bg-app:          var(--ami-navy-900);
  --bg-app-alt:      #201B36;
  --bg-surface:      var(--ami-navy-800);
  --bg-surface-alt:  var(--ami-navy-700);
  --bg-sunken:       #1F1A34;
  --bg-row:          #241F3D;
  --bg-hover:        rgba(139, 120, 240, .12);
  --bg-selected:     rgba(139, 120, 240, .20);
  --bg-nav:          var(--ami-navy-800);
  --bg-overlay:      rgba(20, 16, 34, .64);
  --bg-skeleton:     var(--ami-navy-700);
  --bg-skeleton-hi:  #383052;

  --text-primary:    #FFF7F2;
  --text-secondary:  var(--ami-slate-400);
  --text-muted:      #9A8DA8;
  --text-inverse:    #241F3D;
  --text-brand:      #B8A8F5;

  --border:          var(--ami-navy-600);
  --border-strong:   #443C63;
  --border-focus:    var(--ami-indigo-400);

  --brand:           var(--ami-indigo-400);
  --brand-hover:     #9E8DF3;
  --brand-active:    #B8A8F5;
  --brand-soft:      rgba(139, 120, 240, .18);
  --brand-on:        var(--ami-white);
  --accent:          #B8A8F5;

  --positive-soft:   rgba(5, 205, 153, .14);
  --warning-soft:    rgba(255, 181, 71, .14);
  --negative-soft:   rgba(238, 93, 80, .14);
  --info-soft:       rgba(59, 130, 246, .14);
  --neutral-soft:    rgba(163, 174, 208, .12);

  --data-revenue:    #8B78F0;
  --data-neutral:    #7A6E86;
  --data-revenue-soft: rgba(124, 108, 246, .13);
  --data-units-soft:   rgba(59, 130, 246, .12);
  --data-growth-soft:  rgba(5, 205, 153, .12);
  --data-forecast-soft:rgba(124, 108, 246, .18);
  --grid-line:       rgba(163, 174, 208, .14);
  --axis-line:       rgba(163, 174, 208, .24);

  --share-1: #8B78F0;
  --share-2: #B8A8F5;
  --share-3: #D0BDEE;
  --share-4: #F6C9A8;
  --share-5: #6F6280;
  --share-6: #443C63;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .30);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, .32);
  --sh-md: 0 8px 24px rgba(0, 0, 0, .38);
  --sh-lg: 0 18px 48px rgba(0, 0, 0, .48);
  --sh-card: 0 4px 24px rgba(0, 0, 0, .34);
  --text-faint:      #7A6A88;
  --border-soft:     var(--ami-navy-600);
  --track:           var(--ami-navy-700);
  --track-soft:      var(--ami-navy-700);
  --brand-tint:      rgba(139, 120, 240, .16);
  --brand-ink:       #D8D2F5;
  --marzipan:        #4A3A5E;
  --st-pos-fg: #A3C078;  --st-pos-bg: rgba(163, 192, 120, .16);
  --st-warn-fg:#D9A05F;  --st-warn-bg:rgba(217, 160, 95, .16);
  --st-neg-fg: #E08795;  --st-neg-bg: rgba(224, 135, 149, .16);
  --tone-pos-bg: rgba(163, 192, 120, .12);  --tone-pos-fg: #C7DBA6;  --tone-pos-icon: #A3C078;
  --tone-neg-bg: rgba(224, 135, 149, .12);  --tone-neg-fg: #F0B7C0;
  --st-flat-fg:#9A8DA8;  --st-flat-bg:rgba(154, 141, 168, .14);
  --sh-focus: 0 0 0 3px rgba(139, 120, 240, .30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app: var(--ami-navy-900);        --bg-app-alt: #201B36;
    --bg-surface: var(--ami-navy-800);    --bg-surface-alt: var(--ami-navy-700);
    --bg-sunken: #1F1A34;                 --bg-hover: rgba(139, 120, 240, .12);
    --bg-selected: rgba(139, 120, 240, .20);--bg-nav: var(--ami-navy-800);
    --bg-overlay: rgba(20, 16, 34, .64);
    --bg-skeleton: var(--ami-navy-700);   --bg-skeleton-hi: #383052;
    --text-primary: #FFF7F2;  --text-secondary: var(--ami-slate-400);
    --text-muted: #9A8DA8;                --text-inverse: #241F3D;
    --text-brand: #B8A8F5;
    --border: var(--ami-navy-600);        --border-strong: #443C63;
    --border-focus: var(--ami-indigo-400);
    --brand: var(--ami-indigo-400);       --brand-hover: #9E8DF3;
    --brand-active: #B8A8F5;              --brand-soft: rgba(139, 120, 240, .18);
    --accent: #B8A8F5;
    --positive-soft: rgba(5, 205, 153, .14);
    --warning-soft: rgba(255, 181, 71, .14);
    --negative-soft: rgba(238, 93, 80, .14);
    --info-soft: rgba(59, 130, 246, .14);
    --neutral-soft: rgba(163, 174, 208, .12);
    --data-revenue: #8B78F0;
    --data-neutral: #7A6E86;
    --data-revenue-soft: rgba(124, 108, 246, .13);
    --data-units-soft: rgba(59, 130, 246, .12);
    --data-growth-soft: rgba(5, 205, 153, .12);
    --data-forecast-soft: rgba(124, 108, 246, .18);
    --grid-line: rgba(163, 174, 208, .14);
    --axis-line: rgba(163, 174, 208, .24);
    --share-1: #8B78F0; --share-2: #B8A8F5; --share-3: #D0BDEE;
    --share-4: #F6C9A8; --share-5: #6F6280; --share-6: #443C63;
    --sh-xs: 0 1px 2px rgba(0,0,0,.30);   --sh-sm: 0 2px 6px rgba(0,0,0,.32);
    --sh-md: 0 8px 24px rgba(0,0,0,.38);  --sh-lg: 0 18px 48px rgba(0,0,0,.48);
    --sh-card: 0 4px 24px rgba(0,0,0,.34);
    --text-faint:      #7A6A88;
    --border-soft:     var(--ami-navy-600);
    --track:           var(--ami-navy-700);
    --track-soft:      var(--ami-navy-700);
    --brand-tint:      rgba(139, 120, 240, .16);
    --brand-ink:       #D8D2F5;
    --marzipan:        #4A3A5E;
    --st-pos-fg: #A3C078;  --st-pos-bg: rgba(163, 192, 120, .16);
    --st-warn-fg:#D9A05F;  --st-warn-bg:rgba(217, 160, 95, .16);
    --st-neg-fg: #E08795;  --st-neg-bg: rgba(224, 135, 149, .16);
    --tone-pos-bg: rgba(163, 192, 120, .12);  --tone-pos-fg: #C7DBA6;  --tone-pos-icon: #A3C078;
    --tone-neg-bg: rgba(224, 135, 149, .12);  --tone-neg-fg: #F0B7C0;
    --st-flat-fg:#9A8DA8;  --st-flat-bg:rgba(154, 141, 168, .14);
    --sh-focus: 0 0 0 3px rgba(139, 120, 240, .30);
  }
}

/* ---------------------------------------------------------------- phone --
   The scale under 860px. Only the steps that have to give: display and page
   titles that wrapped to three lines at 32/28px, KPI figures, the card
   padding (22px on a 343px card ate a fifth of the width). base.css narrows
   the page padding and grid gap at the same breakpoint. */
@media (max-width: 860px) {
  :root {
    --fs-display: 28px;  --lh-display: 34px;
    --fs-page:    26px;  --lh-page:    32px;
    --fs-kpi:     26px;  --lh-kpi:     32px;
    --fs-kpi-lg:  30px;  --lh-kpi-lg:  36px;
    --fs-hero:    42px;  --lh-hero:    46px;
    --card-pad:   16px;
    /* the phone shell (js/mobile.js, handoff "Marzi Mobile" 18.09.2026):
       tab bar, screen header, list row, hero figure */
    --h-tabbar:    60px;
    --h-mhead:     56px;
    --safe-b:      env(safe-area-inset-bottom, 0px);
    --safe-t:      env(safe-area-inset-top, 0px);
    --fs-m-title:  22px;  --lh-m-title:  26px;
    --fs-m-obj:    17px;  --lh-m-obj:    22px;
    --fs-m-hero:   20px;
    --fs-m-tile:   21px;
    --w-thumb-m:   48px;
    --h-row-m:     80px;
    --h-chip-m:    20px;
    --h-seg-m:     34px;
    --tap-m:       44px;
    /* iOS Safari zooms the page into any field smaller than 16px and does
       not zoom back: every field on the phone is at least this size */
    --fs-input-m:  16px;
  }
}