/*
 * Fignoc Online — Design Tokens
 * Single source of truth for all design values.
 * Do not add component styles here. Variables only.
 */

:root {
  --color-header-bg:          #ffffff;
  --color-header-border:      #e8e8e8;
  --color-header-text:        #333E48;
  --color-header-muted:       #73787D;
  --color-nav-bar:            #0D2A6E;
  --color-nav-bar-text:       #ffffff;
  --color-nav-bar-hover:      #FF3D3D;
  --color-primary:            #0D2A6E;
  --color-primary-dark:       #001f7a;
  --color-primary-light:      #1a45b0;
  --color-accent:             #E42837;
  --color-accent-hover:       #d41f1f;
  --color-accent-soft:        #fff5f5;
  --color-surface:            #F4F4F4;
  --color-surface-card:       #ffffff;
  --color-border:             #ECECEC;
  --color-border-strong:      #d0d0d0;
  --color-text-primary:       #111111;
  --color-text-body:          #73787D;
  --color-text-secondary:     #333E48;
  --color-text-muted:         #6B6B6B;
  --color-text-inverse:       #ffffff;
  --color-text-on-dark:       rgba(255,255,255,0.80);
  --color-text-on-dark-muted: rgba(255,255,255,0.50);
  --color-price:              #0D2A6E;
  --color-footer-bg:          #333E48;
  --color-footer-link-hover:  #004EC3;
  --color-success:            #16a34a;
  --color-danger:             #fe2828;
  --color-whatsapp:           #25D366;

  /* ── Spacing ── */
  /* Page gutter. Every full-width band frames its content on this one
     value, so the logo, nav, hero and product grid share a left edge. */
  --page-gutter: clamp(1rem, 3vw, 2.5rem);

  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2.5rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;

  /* ── Typography ── */
  --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:   2rem;
  --text-4xl:   clamp(2rem, 5vw, 2.75rem);

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(8,27,74,0.06);
  --shadow-md:  0 4px 12px rgba(8,27,74,0.10);
  --shadow-lg:  0 8px 24px rgba(8,27,74,0.14);
  --shadow-xl:  0 16px 40px rgba(8,27,74,0.18);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
}

/* Mobile — reduce space scale on small screens */
@media (max-width: 768px) {
  :root {
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
  }
}
@media (max-width: 480px) {
  :root {
    --space-xl:  1.5rem;
    --space-2xl: 2.5rem;
  }
}