/**
 * GIREMRUS Design System — Master Token File v1.0
 * Single source of truth for all design decisions.
 * Load order: this file first, everything else after.
 *
 * Namespaces:
 *   --brand-*      Brand colors & tints
 *   --surface-*    Background surfaces
 *   --text-*       Typography colors
 *   --border-*     Border colors
 *   --r-*          Border radius
 *   --sh-*         Shadows
 *   --sp-*         Spacing (8pt grid)
 *   --btn-*        Button component
 *   --card-*       Card component
 *   --input-*      Form input component
 *   --ease-*       Transitions
 *   --z-*          Z-index layers
 */

/* ═══════════════════════════════════════════════════
   MASTER TOKENS
   ═══════════════════════════════════════════════════ */
:root {

  /* ── Brand ─────────────────────────────────────── */
  --brand-primary:      #4933d1;
  --brand-dark:         #3b27b8;
  --brand-light:        #5b3df5;
  --brand-rgb:          73, 51, 209;
  --on-brand:           #ffffff;

  /* Tints (light bg overlays) */
  --brand-soft:         rgba(73, 51, 209, 0.07);
  --brand-soft-2:       rgba(73, 51, 209, 0.13);
  --brand-border-color: rgba(73, 51, 209, 0.18);
  --brand-shadow-color: rgba(73, 51, 209, 0.22);
  --brand-shadow-hover: rgba(73, 51, 209, 0.30);

  /* On-dark accents */
  --brand-accent-light: #a5b4fc;
  --brand-accent-mid:   #7c6ef0;
  --brand-tint-dark:    rgba(73, 51, 209, 0.18);

  /* ── Surfaces ───────────────────────────────────── */
  /* Light */
  --surface:     #ffffff;
  --surface-50:  #f8fafc;
  --surface-100: #f1f5f9;
  --surface-200: #e8eef5;

  /* Dark (section backgrounds, footer) */
  --surface-950: #0d1117;
  --surface-900: #111827;
  --surface-800: #1a2332;
  --surface-700: #1e293b;
  --surface-600: #1f2937;
  --surface-500: #374151;
  --surface-400: #4b5563;

  /* ── Text ───────────────────────────────────────── */
  --text:           #0f172a;
  --text-secondary: #475569;
  --text-muted:     #64748b;
  --text-soft:      #94a3b8;
  --text-disabled:  #cbd5e1;

  /* On dark backgrounds */
  --text-on-dark:       #e2e8f0;
  --text-on-dark-muted: rgba(226, 232, 240, 0.60);
  --text-on-dark-soft:  rgba(226, 232, 240, 0.38);

  /* ── Borders ────────────────────────────────────── */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --border-dark:   rgba(255, 255, 255, 0.07);
  --border-dark-2: rgba(255, 255, 255, 0.12);

  /* ── Status ─────────────────────────────────────── */
  --success:    #15803d;
  --success-bg: #f0fdf4;
  --warning:    #b45309;
  --warning-bg: #fffbeb;
  --danger:     #b91c1c;
  --danger-bg:  #fef2f2;
  --info:       #0369a1;
  --info-bg:    #f0f9ff;

  /* ── Typography ─────────────────────────────────── */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scale */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  clamp(20px, 2vw, 24px);
  --text-3xl:  clamp(24px, 3vw, 36px);
  --text-4xl:  clamp(28px, 3.5vw, 48px);

  /* Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.50;
  --lh-body:   1.65;
  --lh-loose:  1.75;

  /* ── Spacing (8pt grid) ─────────────────────────── */
  --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;
  --sp-20: 80px;

  --shell:      1360px;
  --shell-wide: 1440px;

  /* Section rhythm */
  --section-y:  64px;
  --block-y:    48px;
  --gap-sm:     10px;
  --gap:        16px;
  --gap-lg:     24px;

  /* ── Border radius ──────────────────────────────── */
  --r-2xs:  4px;
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ── Shadows ────────────────────────────────────── */
  --sh-xs:         0 1px 3px rgba(15, 23, 42, 0.05);
  --sh-sm:         0 2px 8px rgba(15, 23, 42, 0.07);
  --sh-md:         0 6px 20px rgba(15, 23, 42, 0.08);
  --sh-lg:         0 12px 32px rgba(15, 23, 42, 0.10);
  --sh-xl:         0 20px 48px rgba(15, 23, 42, 0.12);
  --sh-brand:      0 8px 24px var(--brand-shadow-color);
  --sh-brand-hover: 0 14px 32px var(--brand-shadow-hover);
  --sh-dark:       0 16px 40px rgba(0, 0, 0, 0.25);

  /* ── Buttons ────────────────────────────────────── */
  --btn-h:     44px;
  --btn-h-sm:  36px;
  --btn-h-lg:  52px;
  --btn-px:    22px;
  --btn-px-sm: 14px;
  --btn-px-lg: 32px;
  --btn-r:     10px;
  --btn-fs:    14px;
  --btn-fs-sm: 13px;
  --btn-fw:    600;

  /* ── Cards ──────────────────────────────────────── */
  --card-r:          14px;
  --card-p:          20px;
  --card-p-sm:       14px;
  --card-sh:         var(--sh-sm);
  --card-sh-hover:   var(--sh-lg);
  --card-border:     var(--border);
  --card-bg:         var(--surface);
  --card-hover-border: rgba(73, 51, 209, 0.25);
  --card-hover-sh:   0 8px 28px rgba(73, 51, 209, 0.12);

  /* ── Forms ──────────────────────────────────────── */
  --input-h:      44px;
  --input-r:      10px;
  --input-fs:     15px;
  --input-border: var(--border-strong);
  --input-focus:  var(--brand-primary);
  --input-bg:     var(--surface);
  --input-pad:    10px 14px;

  /* ── Transitions ────────────────────────────────── */
  --ease:      0.18s ease;
  --ease-med:  0.25s ease;
  --ease-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Focus ──────────────────────────────────────── */
  --focus-ring:    0 0 0 3px rgba(73, 51, 209, 0.30);
  --focus-outline: 2px solid var(--brand-primary);
  --focus-offset:  2px;

  /* ── Z-index layers ─────────────────────────────── */
  --z-base:   1;
  --z-raised: 10;
  --z-header: 300;
  --z-drawer: 400;
  --z-modal:  500;
  --z-toast:  600;
  --z-widget: 9990;
}

/* ═══════════════════════════════════════════════════
   BACKWARD COMPAT: --girem-* ALIASES
   Keeps all existing CSS files working without changes
   ═══════════════════════════════════════════════════ */
:root {
  /* Color */
  --girem-color-brand:              var(--brand-primary);
  --girem-color-brand-rgb:          var(--brand-rgb);
  --girem-color-brand-strong:       var(--brand-dark);
  --girem-color-brand-soft:         var(--brand-soft);
  --girem-color-brand-soft-strong:  var(--brand-soft-2);
  --girem-color-brand-border:       var(--brand-border-color);
  --girem-color-brand-shadow:       var(--brand-shadow-color);
  --girem-color-brand-shadow-hover: var(--brand-shadow-hover);
  --girem-color-brand-hover-bg:     var(--brand-soft);
  --girem-color-on-brand:           #ffffff;

  --girem-color-bg:        var(--surface-50);
  --girem-color-surface:   var(--surface);
  --girem-color-text:      var(--text);
  --girem-color-muted:     var(--text-muted);
  --girem-color-border:    var(--border);
  --girem-color-subtle-bg: var(--surface-50);
  --girem-color-overlay:   rgba(15, 23, 42, 0.45);

  /* Typography */
  --girem-font-family:              var(--font);
  --girem-font-size-body:           var(--text-lg);
  --girem-font-size-prose:          var(--text-md);
  --girem-font-size-sm:             var(--text-base);
  --girem-font-size-xs:             var(--text-sm);
  --girem-font-size-eyebrow:        var(--text-xs);
  --girem-font-size-h1:             var(--text-4xl);
  --girem-font-size-h1-hero:        clamp(32px, 3.7vw, 50px);
  --girem-font-size-h2:             var(--text-3xl);
  --girem-font-size-h2-section:     clamp(28px, 3.2vw, 42px);
  --girem-font-size-h3:             clamp(22px, 2.2vw, 28px);
  --girem-font-size-h4:             clamp(20px, 1.8vw, 24px);
  --girem-line-height-body:         var(--lh-body);
  --girem-line-height-prose:        var(--lh-loose);
  --girem-line-height-heading:      1.12;
  --girem-line-height-heading-tight: var(--lh-snug);
  --girem-font-weight-bold:         var(--fw-bold);
  --girem-font-weight-semibold:     var(--fw-semi);
  --girem-font-weight-medium:       var(--fw-medium);

  /* Spacing */
  --girem-space-section-y: 28px;
  --girem-space-shell-x:   32px;
  --girem-shell-max:        var(--shell);
  --girem-space-gap:        var(--gap-sm);
  --girem-space-gap-lg:     var(--gap-lg);

  /* Radius */
  --girem-radius-xl:     var(--r-xl);
  --girem-radius-lg:     var(--r-lg);
  --girem-radius-md:     var(--r-md);
  --girem-radius-sm:     var(--r-sm);
  --girem-radius-button: var(--btn-r);
  --girem-radius-pill:   var(--r-pill);

  /* Shadows */
  --girem-shadow-card:         var(--sh-sm);
  --girem-shadow-panel:        var(--sh-md);
  --girem-shadow-button:       var(--sh-brand);
  --girem-shadow-button-hover: var(--sh-brand-hover);
  --girem-shadow-drawer:       -8px 0 32px rgba(15, 23, 42, 0.12);

  /* Buttons */
  --girem-btn-min-height:         var(--btn-h);
  --girem-btn-min-height-compact: var(--btn-h-sm);
  --girem-btn-padding-x:          var(--btn-px);
  --girem-btn-font-size:          var(--btn-fs);
  --girem-btn-font-size-compact:  var(--btn-fs-sm);

  /* Transitions */
  --girem-transition-fast: var(--ease);
  --girem-transition-base: var(--ease);

  /* Focus */
  --girem-focus-ring:           var(--focus-ring);
  --girem-focus-outline:        var(--focus-outline);
  --girem-focus-outline-offset: var(--focus-offset);

  /* Z-index */
  --girem-z-header:    var(--z-header);
  --girem-z-mobile-nav: var(--z-drawer);

  /* Logo */
  --girem-logo-width:           162px;
  --girem-logo-height:          48px;
  --girem-logo-height-tablet:   44px;
  --girem-logo-height-mobile:   40px;
  --girem-logo-max-width-tablet: 148px;
  --girem-logo-max-width-mobile: 135px;

  /* Header */
  --girem-header-height:     78px;
  --girem-header-shell:      1440px;
  --girem-header-border:     #eceff5;
  --girem-header-cta:        #5b3df5;
  --girem-header-cta-hover:  #5236dd;
  --girem-header-nav-size:   15px;
  --girem-header-font:       var(--font);

  /* Navy/Teal (used only in legacy contexts) */
  --girem-color-navy:      #1e293b;
  --girem-color-navy-text: #e8edf8;
  --girem-color-navy-muted: #8fa3b8;
  --girem-color-navy-link: #b8c5d6;
  --girem-color-teal:      #0c8f84;
}

/* ═══════════════════════════════════════════════════
   SCOPED ALIASES: Catalog Engine (--g-*)
   ═══════════════════════════════════════════════════ */
.girem-catalog-engine {
  --g-font:              var(--font);
  --g-color-bg:          var(--surface);
  --g-color-surface:     var(--surface-50);
  --g-color-surface-2:   var(--surface-100);
  --g-color-border:      var(--border);
  --g-color-border-strong: var(--border-strong);
  --g-color-text:        var(--text);
  --g-color-text-muted:  var(--text-muted);
  --g-color-text-soft:   var(--text-soft);
  --g-color-accent:      var(--brand-primary);
  --g-color-accent-hover: var(--brand-dark);
  --g-color-accent-soft: rgba(73, 51, 209, 0.07);
  --g-color-success:     var(--success);
  --g-color-success-bg:  var(--success-bg);
  --g-color-warning:     var(--warning);
  --g-color-warning-bg:  var(--warning-bg);
  --g-color-danger:      var(--danger);
  --g-color-danger-bg:   var(--danger-bg);

  --g-radius-sm:   var(--r-xs);
  --g-radius-md:   var(--r-md);
  --g-radius-lg:   var(--r-lg);
  --g-radius-pill: var(--r-pill);

  --g-shadow-sm:   var(--sh-xs);
  --g-shadow-md:   var(--sh-sm);
  --g-shadow-lg:   var(--sh-md);

  --g-transition:  var(--ease);
  --g-btn-h:       36px;
  --g-btn-h-sm:    30px;
  --g-space-1:     8px;
  --g-space-2:     16px;
  --g-space-3:     24px;
  --g-space-4:     32px;
  --g-space-5:     40px;
  --g-space-6:     48px;
  --g-lh-tight:    var(--lh-snug);
  --g-lh-body:     var(--lh-normal);
  --g-text-h1:     28px;
  --g-text-h2:     22px;
  --g-text-h3:     18px;
  --g-text-body:   14px;
  --g-text-btn:    13px;
  --g-text-caption: 11px;
  --g-text-card-title: 13px;
  --g-text-card-price: 17px;
  --g-text-product: 14px;
  --g-text-price:  18px;
  --g-text-spec:   12px;
  --g-card-media-h: 148px;
  --g-card-media-h-mobile: 120px;
  --g-card-pad:    10px;
  --g-card-gap:    4px;
}

/* ═══════════════════════════════════════════════════
   SCOPED ALIASES: Catalog Enterprise (--ce-*)
   ═══════════════════════════════════════════════════ */
.girem-catalog-v3,
.girem-ce {
  --ce-radius:     var(--r-md);
  --ce-shadow:     var(--sh-xs);
  --ce-accent:     var(--brand-primary);
  --ce-accent-soft: rgba(73, 51, 209, 0.07);
  --ce-border:     var(--border);
  --ce-text:       var(--text);
  --ce-muted:      var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   SCOPED ALIASES: Product page (--pdp-*)
   ═══════════════════════════════════════════════════ */
.girem-pdp {
  --pdp-accent: var(--brand-primary);
  --pdp-border: var(--border);
}

/* ═══════════════════════════════════════════════════
   SCOPED ALIASES: Wizard (--wz-*)
   ═══════════════════════════════════════════════════ */
.girem-wizard-hero,
.girem-wizard-wrap,
.girem-wizard-progress,
.girem-wizard-nav,
.girem-wizard-step,
.girem-wizard-cat,
[class^="girem-wizard"] {
  --wz-accent:        var(--brand-primary);
  --wz-accent-dark:   var(--brand-dark);
  --wz-accent-soft:   rgba(73, 51, 209, 0.07);
  --wz-accent-tint:   #ede9ff;
  --wz-accent-border: #c4b5fd;
  --wz-accent-light:  #a5b4fc;
  --wz-accent-rgb:    73, 51, 209;
}

/* ═══════════════════════════════════════════════════
   SCOPED ALIASES: AI Widget (--ai-*)
   ═══════════════════════════════════════════════════ */
.girem-ai,
[class^="girem-ai"] {
  --ai-accent:      var(--brand-primary);
  --ai-accent-dark: var(--brand-dark);
  --ai-shadow:      0 4px 20px rgba(73, 51, 209, 0.40);
  --ai-shadow-hover: 0 8px 28px rgba(73, 51, 209, 0.50);
}

/* ═══════════════════════════════════════════════════
   LEGACY --demo-* ALIASES
   (b2b-landing-demo.css + content pages compatibility)
   ═══════════════════════════════════════════════════ */
.girem-b2b-demo,
.giremrus-amo-page,
.girem-content-page,
.girem-code-site {
  --demo-bg:             var(--surface-50);
  --demo-surface:        var(--surface);
  --demo-text:           var(--text);
  --demo-muted:          var(--text-muted);
  --demo-border:         var(--border);
  --demo-accent:         var(--brand-primary);
  --demo-accent-strong:  var(--brand-primary);
  --demo-accent-rgb:     var(--brand-rgb);
  --demo-accent-soft:    var(--brand-soft);
  --demo-accent-soft-strong: var(--brand-soft-2);
  --demo-primary-text:   #ffffff;
  --demo-secondary-bg:   var(--surface);
  --demo-secondary-text: var(--text);
  --demo-secondary-border: rgba(0, 0, 0, 0.12);
  --demo-panel-bg:       var(--surface);
  --demo-subtle-bg:      var(--surface-50);
  --demo-shadow:         var(--sh-sm);
  --demo-radius-xl:      var(--r-xl);
  --demo-radius-lg:      var(--r-lg);
  --demo-shell:          var(--shell);
}

/* ═══════════════════════════════════════════════════
   GLOBAL UTILITY: Focus ring
   ═══════════════════════════════════════════════════ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus-visible {
  background: var(--surface);
  clip: auto !important;
  clip-path: none;
  color: var(--text);
  display: block;
  font-size: var(--text-base);
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 12px 16px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
  box-shadow: var(--sh-sm);
}

*:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}