/* ============================================================
   MP EMBALAGENS — DESIGN TOKENS
   Three-Layer Architecture: Primitive → Semantic → Component
   ============================================================ */

/* ──────────────────────────────────────────────
   LAYER 1 — PRIMITIVES (raw values, never used in components directly)
   ────────────────────────────────────────────── */
:root {
  /* Brand primitives */
  --p-yellow-500:        #f3c515;
  --p-yellow-600:        #d8a900;
  --p-yellow-100:        rgba(243, 197, 21, 0.15);
  --p-green-500:         #20885b;
  --p-green-600:         #186a45;

  /* Neutral primitives */
  --p-ink-900:           #17191d;
  --p-graphite-800:      #2a2d33;
  --p-graphite-700:      #3a3d44;
  --p-nav-500:           #464a51;
  --p-paper-50:          #fbfaf5;
  --p-white:             #ffffff;
  --p-line-200:          #e7e2d4;
  --p-blue-100:          #dce8ef;

  /* Functional primitives */
  --p-whatsapp:          #25D366;
  --p-error-500:         #dc3c3c;
  --p-success-500:       #20885b;

  /* Type primitives */
  --p-font-sans:         "Visby CF", Inter, system-ui, sans-serif;
  --p-font-mono:         "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Spacing primitives (8pt grid) */
  --p-space-1:           4px;
  --p-space-2:           8px;
  --p-space-3:           12px;
  --p-space-4:           16px;
  --p-space-5:           20px;
  --p-space-6:           24px;
  --p-space-8:           32px;
  --p-space-10:          40px;
  --p-space-12:          48px;
  --p-space-16:          64px;
  --p-space-20:          80px;
  --p-space-24:          96px;
  --p-space-32:          128px;

  /* Radius primitives */
  --p-radius-sm:         4px;
  --p-radius-md:         8px;
  --p-radius-lg:         12px;
  --p-radius-full:       9999px;
}

/* ──────────────────────────────────────────────
   LAYER 2 — SEMANTIC (purpose aliases, theme-aware)
   ────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --color-surface-base:      var(--p-ink-900);
  --color-surface-raised:    var(--p-graphite-800);
  --color-surface-overlay:   var(--p-graphite-700);

  /* Text */
  --color-text-primary:      var(--p-paper-50);
  --color-text-secondary:    rgba(251, 250, 245, 0.72);
  --color-text-muted:        rgba(251, 250, 245, 0.4);
  --color-text-inverse:      var(--p-ink-900);

  /* Brand */
  --color-action:            var(--p-yellow-500);
  --color-action-hover:      var(--p-yellow-600);
  --color-action-on:         var(--p-ink-900);

  --color-accent:            var(--p-green-500);
  --color-accent-on:         var(--p-white);

  /* Lines */
  --color-border-subtle:     rgba(251, 250, 245, 0.1);
  --color-border-strong:     rgba(251, 250, 245, 0.25);
  --color-grid-line:         rgba(251, 250, 245, 0.06);
}

[data-theme="light"] {
  --color-surface-base:      var(--p-paper-50);
  --color-surface-raised:    var(--p-white);
  --color-surface-overlay:   var(--p-blue-100);

  --color-text-primary:      var(--p-ink-900);
  --color-text-secondary:    var(--p-nav-500);
  --color-text-muted:        rgba(23, 25, 29, 0.4);
  --color-text-inverse:      var(--p-paper-50);

  --color-border-subtle:     var(--p-line-200);
  --color-border-strong:     rgba(23, 25, 29, 0.15);
  --color-grid-line:         rgba(23, 25, 29, 0.04);
}

/* Shared semantic */
:root {
  --space-xs:                var(--p-space-2);
  --space-sm:                var(--p-space-3);
  --space-md:                var(--p-space-6);
  --space-lg:                var(--p-space-10);
  --space-xl:                var(--p-space-16);
  --space-2xl:               var(--p-space-24);

  --radius-button:           var(--p-radius-md);
  --radius-card:             var(--p-radius-md);
  --radius-pill:             var(--p-radius-full);

  --font-display:            var(--p-font-sans);
  --font-body:               var(--p-font-sans);
  --font-mono:               var(--p-font-mono);

  /* Type scale (fluid) */
  --text-mega:               clamp(64px, 14vw, 220px);
  --text-display:            clamp(40px, 6vw, 88px);
  --text-h1:                 clamp(28px, 3.5vw, 48px);
  --text-h2:                 clamp(22px, 2.4vw, 32px);
  --text-h3:                 18px;
  --text-body:               16px;
  --text-small:              13px;
  --text-mono:               12px;

  /* Motion */
  --ease-out:                cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:             cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:           160ms;
  --duration-base:           320ms;
  --duration-slow:           640ms;
}

/* ──────────────────────────────────────────────
   LAYER 3 — COMPONENT (component-specific overrides)
   ────────────────────────────────────────────── */
:root {
  /* Button */
  --button-height-sm:        36px;
  --button-height-md:        48px;
  --button-height-lg:        56px;
  --button-padding-x:        var(--p-space-6);
  --button-radius:           var(--radius-button);
  --button-font-weight:      700;
  --button-letter-spacing:   0.03em;

  --button-primary-bg:       var(--color-action);
  --button-primary-fg:       var(--color-action-on);
  --button-primary-hover-bg: var(--color-action-hover);

  /* Card */
  --card-bg:                 var(--color-surface-raised);
  --card-border:             1px solid var(--color-border-subtle);
  --card-padding:            var(--p-space-6);
  --card-radius:             var(--radius-card);

  /* Badge */
  --badge-padding-x:         var(--p-space-3);
  --badge-padding-y:         var(--p-space-1);
  --badge-radius:            var(--radius-pill);
  --badge-font-size:         11px;
  --badge-font-weight:       700;
  --badge-letter-spacing:    0.08em;
}