/* =============================================================================
 * Zraby Design Tokens — Browser-Delivered Bundle
 * =============================================================================
 * Source-of-truth: core/resources/sass/tokens/*.scss
 * Generated by: w1e-design-tokens-integrate (Wave 1, 2026-05-28)
 *
 * This file is the static CSS equivalent of the SCSS partials. It is linked
 * from storefront + admin + central head partials BEFORE any other CSS so
 * its CSS custom properties are available to every downstream stylesheet.
 *
 * Loaded by:
 *   - core/resources/views/tenant/frontend/partials/header.blade.php
 *   - core/resources/views/landlord/admin/partials/header.blade.php
 *   - core/resources/views/landlord/frontend/partials/header.blade.php
 *
 * Cascade contract:
 *   1. Primitives (color ramps, spacing, radii, type, etc.)
 *   2. Semantic aliases (--surface-page, --text-primary, --accent, etc.)
 *   3. Per-theme [data-theme="…"] overrides (11 themes + admin)
 *   4. Legacy bridge — invert direction so --accent FOLLOWS the tenant's
 *      admin-configured --main-color-one when set, with per-theme fallback
 *
 * Bridge inversion rationale: storefront pages already emit
 * --main-color-one from per-tenant admin settings via
 * tenant.frontend.partials.css-variable. Pointing --main-color-one AT
 * --accent (the original drop-in direction) would clobber tenant choices.
 * Pointing --accent AT --main-color-one keeps every existing tenant
 * rendering exactly as before, while letting new code reference --accent.
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * LAYER 1 — PRIMITIVE TOKENS                              (design-tokens.md §4)
 * ----------------------------------------------------------------------------- */
:root {
  /* 4.1 Color: Slate (neutral) */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* 4.1 Color: Brand (default = indigo, theme-overridable) */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;
  --brand-900: #312E81;

  /* 4.1 Color: State (fixed across themes) */
  --green-500: #10B981;
  --green-600: #059669;
  --amber-500: #F59E0B;
  --red-500:   #EF4444;
  --red-600:   #DC2626;
  --blue-500:  #3B82F6;

  /* 4.1 Color: Base */
  --white: #FFFFFF;
  --black: #000000;

  /* 4.2 Spacing scale (8px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* 4.3 Type scale (modular, 1.25 ratio) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* 4.4 Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  /* 4.5 Font weights */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* 4.6 Border radius (finite ladder of 6) */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* 4.7 Shadow ladder */
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.1),
                  0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.1),
                  0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.1),
                  0 8px 10px -6px rgb(0 0 0 / 0.04);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* 4.8 Motion: durations + easing */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 4.9 Z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-popover: 400;
  --z-toast:   500;
  --z-max:     999;

  /* §7.1 Aspect ratios */
  --aspect-square:   1 / 1;
  --aspect-portrait: 4 / 5;
  --aspect-photo:    4 / 3;
  --aspect-video:    16 / 9;
  --aspect-cinema:   21 / 9;

  /* Breakpoints */
  --bp-xs:  0px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* Container max-widths */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  /* Font families (primitive) */
  --font-stack-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-stack-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-stack-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  --font-stack-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* -----------------------------------------------------------------------------
 * LAYER 2 — SEMANTIC TOKENS                               (design-tokens.md §5)
 * ----------------------------------------------------------------------------- */
:root {
  /* 5.1 Surfaces */
  --surface-page:    var(--slate-50);
  --surface-default: var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--slate-100);
  --surface-inverse: var(--slate-900);
  --surface-overlay: rgb(15 23 42 / 0.5);

  /* 5.2 Text */
  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-tertiary:  var(--slate-500);
  --text-disabled:  var(--slate-400);
  --text-inverse:   var(--white);
  --text-accent:    var(--brand-600);
  --text-success:   var(--green-600);
  --text-danger:    var(--red-600);

  /* 5.3 Borders */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-accent:  var(--brand-500);
  --border-danger:  var(--red-500);

  /* 5.4 Accent — defaults; see Legacy Bridge below for runtime cascade */
  --accent:            var(--brand-500);
  --accent-hover:      var(--brand-600);
  --accent-active:     var(--brand-700);
  --accent-subtle:     var(--brand-50);
  --accent-text-on:    var(--white);
  --accent-focus-ring: rgb(99 102 241 / 0.4);

  /* 5.5 Typography semantic */
  --font-body:    var(--font-stack-body);
  --font-heading: var(--font-stack-heading);
  --font-mono:    var(--font-stack-mono);

  /* 5.5 Composite type tokens */
  --type-h1-size:        var(--text-5xl);
  --type-h1-line:        var(--leading-tight);
  --type-h1-weight:      var(--font-bold);

  --type-h2-size:        var(--text-4xl);
  --type-h2-line:        var(--leading-tight);
  --type-h2-weight:      var(--font-semibold);

  --type-h3-size:        var(--text-3xl);
  --type-h3-line:        var(--leading-tight);
  --type-h3-weight:      var(--font-semibold);

  --type-h4-size:        var(--text-2xl);
  --type-h4-line:        var(--leading-snug);
  --type-h4-weight:      var(--font-semibold);

  --type-h5-size:        var(--text-xl);
  --type-h5-line:        var(--leading-snug);
  --type-h5-weight:      var(--font-semibold);

  --type-body-size:      var(--text-base);
  --type-body-line:      var(--leading-normal);
  --type-body-weight:    var(--font-regular);

  --type-body-sm-size:   var(--text-sm);
  --type-body-sm-line:   var(--leading-normal);
  --type-body-sm-weight: var(--font-regular);

  --type-caption-size:   var(--text-xs);
  --type-caption-line:   var(--leading-loose);
  --type-caption-weight: var(--font-regular);

  --type-button-size:    var(--text-sm);
  --type-button-line:    var(--leading-snug);
  --type-button-weight:  var(--font-semibold);
}

/* -----------------------------------------------------------------------------
 * LAYER 3 — THEME OVERRIDES (default hex values)         (design-tokens.md §6)
 * The legacy bridge below re-applies --accent through a fallback chain so
 * tenant-configured --main-color-one wins; these hex values are the per-theme
 * defaults when no tenant override is set.
 * ----------------------------------------------------------------------------- */

:root[data-theme="default"] {
  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-600);
  --accent-active: var(--brand-700);
  --accent-subtle: var(--brand-50);
  --font-heading:  var(--font-stack-body);
}

:root[data-theme="linkcio"] {
  --accent:        #8B6914;
  --accent-hover:  #6B5010;
  --accent-active: #4A3728;
  --accent-subtle: #FAF6EE;
  --surface-page:  #FAF6EE;
  --font-heading:  var(--font-stack-serif);
}

:root[data-theme="electronics"] {
  --accent:        #F83A26;
  --accent-hover:  #DC2D1B;
  --accent-active: #B82516;
  --accent-subtle: #FFF1EF;
}

:root[data-theme="cosmetics"] {
  --accent:        #E91E63;
  --accent-hover:  #C2185B;
  --accent-active: #880E4F;
  --accent-subtle: #FCE4EC;
  --font-heading:  var(--font-stack-serif);
}

:root[data-theme="stationary"] {
  /* MUJI / Baron Fig — calm, understated, paper-like restraint.
     Teal-green accent on a warm off-white "paper" page surface. */
  --accent:        #118668;
  --accent-hover:  #0E6E55;
  --accent-active: #095440;
  --accent-subtle: #E6F4EF;
  --surface-page:  #FAFAF7;
  --accent-focus-ring: rgb(17 134 104 / 0.35);
}

:root[data-theme="fashiontwo"] {
  --accent:        #0F172A;
  --accent-hover:  #1E293B;
  --accent-active: #000000;
  --accent-subtle: #F1F5F9;
  --font-heading:  var(--font-stack-serif);
}

:root[data-theme="gifts"] {
  /* Etsy / Uncommon Goods — warm, playful, curated-gift identity:
     coral-terracotta accent on a soft cream page, friendly serif headings. */
  --accent:        #E4572E;
  --accent-hover:  #C8421F;
  --accent-active: #A23316;
  --accent-subtle: #FDEDE6;
  --surface-page:  #FCF7F1;
  --font-heading:  var(--font-stack-serif);
}

:root[data-theme="allinone"] {
  --accent:            #2563EB;
  --accent-hover:      #1D4ED8;
  --accent-active:     #1E40AF;
  --accent-subtle:     #DBEAFE;
  --accent-focus-ring: rgb(37 99 235 / 0.35);
  --border-accent:     #2563EB;
  --text-accent:       #1D4ED8;
}

:root[data-theme="whiteboard"] {
  /* Notion / Linear identity: monochrome surfaces + a subtle violet-indigo
     accent. Crisp lines, lots of whitespace, productized SaaS look. */
  --accent:        #5E6AD2;
  --accent-hover:  #4F5BC4;
  --accent-active: #4148A8;
  --accent-subtle: #EEF0FB;
  --surface-page:  #FBFBFA;
}

:root[data-theme="handicrafts"] {
  --accent:        #B45309;
  --accent-hover:  #92400E;
  --accent-active: #78350F;
  --accent-subtle: #FEF3C7;
  --font-heading:  var(--font-stack-serif);
}

:root[data-theme="affiliate"] {
  /* Link-in-bio identity (Linktree / Beacons): vibrant violet, bold and
     mobile-first. Distinct from default indigo / linkcio brown / gifts pink. */
  --accent:        #7C3AED;
  --accent-hover:  #6D28D9;
  --accent-active: #5B21B6;
  --accent-subtle: #F5F3FF;
  --surface-page:  #FAF5FF;
}

:root[data-theme="admin"] {
  --accent:        #B66DFF;
  --accent-hover:  #9F4BE6;
  --accent-active: #7A36BD;
  --accent-subtle: #F2E6FF;
}

/* -----------------------------------------------------------------------------
 * LEGACY ALIAS BRIDGE (inverted direction)               (design-tokens.md §11.4)
 *
 * Re-routes --accent through a per-theme fallback chain that prefers the
 * tenant's admin-configured --main-color-one (emitted by
 * tenant.frontend.partials.css-variable) when set. This MUST come AFTER the
 * theme override blocks so it wins the cascade.
 * ----------------------------------------------------------------------------- */

:root[data-theme="default"] {
  --accent:       var(--main-color-one, var(--brand-500));
  --accent-hover: var(--main-color-two, var(--brand-600));
}
:root[data-theme="linkcio"] {
  --accent:       var(--main-color-one, #8B6914);
  --accent-hover: var(--main-color-two, #6B5010);
}
:root[data-theme="electronics"] {
  --accent:       var(--main-color-one, #F83A26);
  --accent-hover: var(--main-color-two, #DC2D1B);
}
:root[data-theme="cosmetics"] {
  --accent:       var(--main-color-one, #E91E63);
  --accent-hover: var(--main-color-two, #C2185B);
}
:root[data-theme="stationary"] {
  --accent:       var(--main-color-one, #118668);
  --accent-hover: var(--main-color-two, #0E6E55);
}
:root[data-theme="fashiontwo"] {
  --accent:       var(--main-color-one, #0F172A);
  --accent-hover: var(--main-color-two, #1E293B);
}
:root[data-theme="gifts"] {
  --accent:       var(--main-color-one, #E4572E);
  --accent-hover: var(--main-color-two, #C8421F);
}
:root[data-theme="allinone"] {
  --accent:       var(--main-color-one, #2563EB);
  --accent-hover: var(--main-color-two, #1D4ED8);
}
:root[data-theme="whiteboard"] {
  --accent:       var(--main-color-one, #5E6AD2);
  --accent-hover: var(--main-color-two, #4F5BC4);
}
:root[data-theme="handicrafts"] {
  --accent:       var(--main-color-one, #B45309);
  --accent-hover: var(--main-color-two, #92400E);
}
:root[data-theme="affiliate"] {
  --accent:       var(--main-color-one, #7C3AED);
  --accent-hover: var(--main-color-two, #6D28D9);
}
:root[data-theme="admin"] {
  --accent:       var(--main-color-one, #B66DFF);
  --accent-hover: var(--main-color-two, #9F4BE6);
}

/* When no data-theme is set at all (defensive fallback) */
:root {
  --accent:       var(--main-color-one, var(--brand-500));
  --accent-hover: var(--main-color-two, var(--brand-600));
}

/* End design-tokens.css */