/**
 * Minaco Commerce Design System V2 — tokens
 * Primitive and semantic values only. Components must consume these tokens.
 */

@layer minaco-v2.reset, minaco-v2.base, minaco-v2.layout, minaco-v2.components, minaco-v2.shell, minaco-v2.pages, minaco-v2.bridge, minaco-v2.utilities;

:root {
  color-scheme: light;

  /* Brand primitives */
  --m-blue-25: #f7fbff;
  --m-blue-50: #eef6ff;
  --m-blue-100: #dcecff;
  --m-blue-200: #b9d8f7;
  --m-blue-300: #8fc0ed;
  --m-blue-400: #5d9fda;
  --m-blue-500: #2f7fc4;
  --m-blue-600: #1764ab;
  --m-blue-700: #0a4d92;
  --m-blue-800: #083c73;
  --m-blue-900: #062b54;
  --m-blue-950: #041d3a;

  --m-orange-25: #fffaf6;
  --m-orange-50: #fff3e9;
  --m-orange-100: #ffe3cc;
  --m-orange-200: #ffc69d;
  --m-orange-300: #ffa163;
  --m-orange-400: #fb8135;
  --m-orange-500: #f36b16;
  --m-orange-600: #d95608;
  --m-orange-700: #ad4105;
  --m-orange-800: #873508;
  --m-orange-900: #6d2e0b;

  --m-slate-0: #ffffff;
  --m-slate-25: #fbfcfe;
  --m-slate-50: #f7f9fc;
  --m-slate-100: #eef2f6;
  --m-slate-200: #d9e3ed;
  --m-slate-300: #bdcbd9;
  --m-slate-400: #91a4b7;
  --m-slate-500: #63778b;
  --m-slate-600: #495f74;
  --m-slate-700: #344b61;
  --m-slate-800: #233a50;
  --m-slate-900: #142b42;
  --m-slate-950: #0a1d30;

  --m-green-50: #edf9f4;
  --m-green-100: #d5f1e5;
  --m-green-500: #1c9470;
  --m-green-600: #147a5a;
  --m-green-700: #105f48;
  --m-amber-50: #fff8e8;
  --m-amber-100: #ffedbd;
  --m-amber-600: #a65a00;
  --m-amber-700: #7a4300;
  --m-red-50: #fff1f1;
  --m-red-100: #ffdcdc;
  --m-red-500: #dd4b4b;
  --m-red-600: #c73535;
  --m-red-700: #a62525;
  --m-purple-100: #f1eaff;
  --m-purple-700: #55308f;

  /* Semantic color */
  --m-color-brand: #0056a6;
  --m-color-brand-hover: var(--m-blue-800);
  --m-color-brand-pressed: var(--m-blue-900);
  /* Bright brand orange uses dark text; darker interaction states use white. */
  --m-color-commerce: #f37021;
  --m-color-commerce-hover: var(--m-orange-800);
  --m-color-commerce-pressed: var(--m-orange-900);
  --m-color-commerce-accent: var(--m-orange-500);
  --m-color-canvas: #f4f7fb;
  --m-color-surface: var(--m-slate-0);
  --m-color-surface-soft: var(--m-slate-50);
  --m-color-surface-brand: var(--m-blue-50);
  --m-color-surface-commerce: var(--m-orange-50);
  --m-color-text: #303238;
  --m-color-heading: #202124;
  --m-color-muted: #60646c;
  --m-color-price: #ad4105;
  --m-color-border: var(--m-slate-200);
  --m-color-border-strong: var(--m-slate-300);
  --m-color-success: var(--m-green-600);
  --m-color-warning: var(--m-amber-700);
  --m-color-danger: var(--m-red-600);
  --m-color-focus: rgba(243, 107, 22, .36);
  --m-color-overlay: rgba(4, 29, 58, .58);
  --m-color-on-brand: var(--m-slate-0);
  --m-color-on-commerce: #202124;
  --m-color-on-danger: var(--m-slate-0);
  --m-color-on-light: var(--m-slate-900);
  --m-color-disabled-bg: var(--m-slate-100);
  --m-color-disabled-border: var(--m-slate-300);
  --m-color-disabled-text: var(--m-slate-600);

  /* Typography — exactly three visual roles per URL. */
  --m-font-sans: "Google Sans Flex", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --m-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --m-type-title: 1rem;
  --m-type-body: .875rem;
  --m-type-meta: .75rem;
  /* Compatibility aliases: aliases never introduce a fourth visual size. */
  --m-text-display: var(--m-type-title);
  --m-text-section: var(--m-type-title);
  --m-text-card: var(--m-type-body);
  --m-text-body: var(--m-type-body);
  --m-text-label: var(--m-type-meta);
  --m-leading-tight: 1.15;
  --m-leading-snug: 1.35;
  --m-leading-body: 1.58;
  --m-weight-regular: 400;
  --m-weight-medium: 600;
  --m-weight-semibold: 600;
  --m-weight-bold: 700;
  --m-tracking-tight: -.025em;
  --m-tracking-label: .012em;

  /* Four-pixel spacing rhythm */
  --m-space-0: 0;
  --m-space-1: .25rem;
  --m-space-2: .5rem;
  --m-space-3: .75rem;
  --m-space-4: 1rem;
  --m-space-5: 1.25rem;
  --m-space-6: 1.5rem;
  --m-space-8: 2rem;
  --m-space-10: 2.5rem;
  --m-space-12: 3rem;
  --m-space-14: 3.5rem;
  --m-space-16: 4rem;
  --m-space-20: 5rem;

  /* Shape */
  --m-radius-control: .625rem;
  --m-radius-card: .875rem;
  --m-radius-feature: 1.125rem;
  --m-radius-pill: 999px;

  /* Elevation */
  --m-shadow-0: none;
  --m-shadow-1: 0 1px 2px rgba(6, 43, 84, .04), 0 5px 16px rgba(6, 43, 84, .055);
  --m-shadow-2: 0 3px 8px rgba(6, 43, 84, .07), 0 14px 34px rgba(6, 43, 84, .1);
  --m-shadow-3: 0 10px 24px rgba(6, 43, 84, .12), 0 28px 70px rgba(6, 43, 84, .18);

  /* Motion */
  --m-duration-instant: 100ms;
  --m-duration-fast: 150ms;
  --m-duration-base: 220ms;
  --m-duration-slow: 300ms;
  --m-duration-reveal: 420ms;
  --m-ease-standard: cubic-bezier(.2, .7, .2, 1);
  --m-ease-enter: cubic-bezier(.2, .8, .2, 1);
  --m-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Layout */
  --m-container: 80rem;
  --m-reading: 47.5rem;
  --m-gutter: clamp(.75rem, .35rem + 1.5vw, 1.5rem);
  --m-section-gap: clamp(1.5rem, .9rem + 2.2vw, 3.5rem);
  --m-header-offset: 8.25rem;

  /* Control sizing */
  --m-control-sm: 2.25rem;
  --m-control-md: 2.75rem;
  --m-control-lg: 3.25rem;
  --m-touch-target: 2.75rem;

  /* Layer scale */
  --m-z-base: 0;
  --m-z-raised: 10;
  --m-z-sticky: 100;
  --m-z-dropdown: 300;
  --m-z-drawer: 600;
  --m-z-dialog: 800;
  --m-z-toast: 1000;
}

@media (min-width: 64rem) {
  :root {
    --m-type-title: 1.125rem;
  }
}

@media (max-width: 59.999rem) {
  :root {
    --m-header-offset: 4rem;
  }
}

@media (prefers-contrast: more) {
  :root {
    --m-color-border: var(--m-slate-400);
    --m-color-border-strong: var(--m-slate-500);
    --m-color-muted: var(--m-slate-700);
  }
}