/* ============================================================
   Cell Peças — tokens de marca
   COPIADO do Design System oficial do cliente:
   clientes/cell-pecas/4.Marca/1784826338-Cell Peças Design System.zip
   (tokens/colors.css, typography.css, spacing.css, radius.css,
    elevation.css, motion.css, base.css)
   NÃO editar valores aqui à mão — se a marca mudar, reexportar o DS.
   ============================================================ */

/* ============================================================
   Cell Peças — Color tokens
   Brand anchors sampled from the logo:
     Blue  #006CA8  (globe oceans)  -> --blue-600
     Lime  #B4CF33  (globe land)    -> --lime-400
     Ink   #101315  (outlines/text)
   Ramps generated perceptually in OKLCH around those anchors.
   ============================================================ */
:root {
  /* ---- Brand blue ---- */
  --blue-50:  #F0F8FE;
  --blue-100: #DEEFFE;
  --blue-200: #BBE0FE;
  --blue-300: #8DCCFE;
  --blue-400: #57ADED;
  --blue-500: #1D8DD5;
  --blue-600: #006CA8; /* brand */
  --blue-700: #035788;
  --blue-800: #03436A;
  --blue-900: #01314F;
  --blue-950: #012036;

  /* ---- Brand lime (chartreuse) ---- */
  --lime-50:  #F1FECA;
  --lime-100: #E2FB85;
  --lime-200: #D2EC6E;
  --lime-300: #C3DE54;
  --lime-400: #B4CF33; /* brand */
  --lime-500: #97AE22;
  --lime-600: #778B13;
  --lime-700: #5C6C05;
  --lime-800: #424E02;
  --lime-900: #2C3502;
  --lime-950: #1C2301;

  /* ---- Neutrals (cool, faintly blue) ---- */
  --gray-0:    #FFFFFF;
  --gray-50:   #F5F8FC;
  --gray-100:  #ECF0F3;
  --gray-200:  #DCE0E4;
  --gray-300:  #C8CDD1;
  --gray-400:  #AAAEB3;
  --gray-500:  #898E93;
  --gray-600:  #6D7277;
  --gray-700:  #53575B;
  --gray-800:  #3B3F42;
  --gray-900:  #282A2D;
  --gray-950:  #171A1C;
  --gray-1000: #0C0D0F;
  --ink:       #101315; /* logo outline black */

  /* ---- Semantic hues ---- */
  --green-50:  #D6FEDC;
  --green-100: #BAF6C5;
  --green-500: #3C9C58;
  --green-600: #278645;
  --green-700: #156D34;

  --amber-50:  #FEF1E0;
  --amber-100: #FEE1BB;
  --amber-500: #E49E22;
  --amber-600: #C98A16;
  --amber-700: #A36E04;

  --red-50:  #FEEDEB;
  --red-100: #FEDBD6;
  --red-500: #D8554C;
  --red-600: #BD413A;
  --red-700: #9C2F2A;

  /* ============================================================
     Semantic aliases — reference these in product UI, not the raw ramps
     ============================================================ */

  /* Brand shortcuts */
  --brand-blue: var(--blue-600);
  --brand-blue-deep: var(--blue-800);
  --brand-lime: var(--lime-400);
  --brand-ink: var(--ink);

  /* Text */
  --text-strong:  var(--gray-1000);
  --text-body:    var(--gray-800);
  --text-muted:   var(--gray-600);
  --text-subtle:  var(--gray-500);
  --text-disabled:var(--gray-400);
  --text-link:    var(--blue-600);
  --text-link-hover: var(--blue-700);
  --text-on-blue: #FFFFFF;
  --text-on-lime: var(--lime-950);  /* dark ink reads on the bright lime */
  --text-on-ink:  var(--gray-50);
  --text-inverse: var(--gray-50);

  /* Surfaces */
  --surface-page:    var(--gray-50);
  --surface-card:    var(--gray-0);
  --surface-sunken:  var(--gray-100);
  --surface-hover:   var(--gray-50);
  --surface-blue:    var(--blue-600);
  --surface-blue-soft: var(--blue-50);
  --surface-lime:    var(--lime-400);
  --surface-lime-soft: var(--lime-50);
  --surface-ink:     var(--ink);
  --surface-inverse: var(--gray-950);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-ink:     var(--ink);
  --border-brand:   var(--blue-600);

  /* Primary action (blue) */
  --action-primary:        var(--blue-600);
  --action-primary-hover:  var(--blue-700);
  --action-primary-active: var(--blue-800);
  --action-primary-text:   #FFFFFF;

  /* Accent action (lime) */
  --accent:        var(--lime-400);
  --accent-hover:  var(--lime-500);
  --accent-active: var(--lime-600);
  --accent-text:   var(--lime-950);

  /* Focus */
  --focus-ring: color-mix(in srgb, var(--blue-500) 55%, transparent);

  /* Feedback */
  --success:     var(--green-600);
  --success-bg:  var(--green-50);
  --success-text:var(--green-700);
  --warning:     var(--amber-600);
  --warning-bg:  var(--amber-50);
  --warning-text:var(--amber-700);
  --danger:      var(--red-600);
  --danger-bg:   var(--red-50);
  --danger-text: var(--red-700);
  --info:        var(--blue-600);
  --info-bg:     var(--blue-50);
  --info-text:   var(--blue-800);

  /* Stock status — parts catalog domain */
  --stock-in:      var(--green-600);
  --stock-in-bg:   var(--green-50);
  --stock-low:     var(--amber-600);
  --stock-low-bg:  var(--amber-50);
  --stock-out:     var(--gray-500);
  --stock-out-bg:  var(--gray-100);

  /* Overlay / scrim */
  --scrim: color-mix(in srgb, var(--blue-950) 55%, transparent);
}

/* ============================================================
   Cell Peças — Typography tokens
   Display : Archivo         (bold grotesque — echoes the logo wordmark's weight)
   UI/Body : IBM Plex Sans   (engineered, legible)
   Mono    : IBM Plex Mono   (SKUs, part numbers, codes)
   NOTE: Google Fonts substitutions — the logo lettering itself is custom
   and must never be re-typeset in these fonts.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Type scale (16px root) */
  --text-2xs:  0.6875rem; /* 11px — micro labels, SKU chips */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */
  --text-6xl:  4.5rem;    /* 72px */

  /* Line height */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.14em; /* uppercase eyebrows, e.g. "O MUNDO DO TÉCNICO" */

  /* ---- Semantic text roles ---- */
  --display-family: var(--font-display);
  --display-weight: var(--weight-extrabold);
  --display-tracking: var(--tracking-tight);
  --display-leading: var(--leading-tight);

  --heading-family: var(--font-display);
  --heading-weight: var(--weight-bold);
  --heading-leading: var(--leading-snug);

  --body-family: var(--font-sans);
  --body-weight: var(--weight-regular);
  --body-leading: var(--leading-normal);

  --eyebrow-family: var(--font-sans);
  --eyebrow-weight: var(--weight-bold);
  --eyebrow-tracking: var(--tracking-widest);

  --mono-family: var(--font-mono);
}

/* ============================================================
   Cell Peças — Spacing scale (4px base grid)
   ============================================================ */
:root {
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem; /* 2px  */
  --space-1:    0.25rem;  /* 4px  */
  --space-1-5:  0.375rem; /* 6px  */
  --space-2:    0.5rem;   /* 8px  */
  --space-2-5:  0.625rem; /* 10px */
  --space-3:    0.75rem;  /* 12px */
  --space-4:    1rem;     /* 16px */
  --space-5:    1.25rem;  /* 20px */
  --space-6:    1.5rem;   /* 24px */
  --space-7:    1.75rem;  /* 28px */
  --space-8:    2rem;     /* 32px */
  --space-10:   2.5rem;   /* 40px */
  --space-12:   3rem;     /* 48px */
  --space-14:   3.5rem;   /* 56px */
  --space-16:   4rem;     /* 64px */
  --space-20:   5rem;     /* 80px */
  --space-24:   6rem;     /* 96px */
  --space-32:   8rem;     /* 128px */

  /* Layout rhythm */
  --gutter:        var(--space-6);
  --section-y:     var(--space-20);
  --container-max: 1200px;
  --container-wide:1440px;
  --field-height:  2.75rem;   /* 44px — min hit target */
  --field-height-sm: 2.25rem; /* 36px */
  --field-height-lg: 3.25rem; /* 52px */
}

/* ============================================================
   Cell Peças — Radius & border tokens
   The mark is a bold, thick-outlined sticker; the system favours
   confident 2px borders and medium, friendly corners.
   ============================================================ */
:root {
  /* Corner radius */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;  /* default control radius */
  --radius-lg:   14px;  /* cards */
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Border widths — the brand leans chunky */
  --border-hairline: 1px;
  --border-thin:     1.5px;
  --border-base:     2px;   /* signature weight */
  --border-thick:    3px;

  /* Ready-made border shorthands */
  --border-card:  var(--border-hairline) solid var(--border-subtle);
  --border-field: var(--border-thin) solid var(--border-default);
  --border-ink-2: var(--border-base) solid var(--ink);
}

/* ============================================================
   Cell Peças — Elevation (shadows)
   Two families:
   1. Soft, cool-tinted ambient shadows for depth.
   2. "Hard" offset shadows — the signature sticker/emblem lift used
      on hero CTAs and feature cards. Pair with a 2px ink border.
   ============================================================ */
:root {
  /* Soft ambient (cool blue-grey tint) */
  --shadow-xs: 0 1px 2px rgba(3, 34, 56, 0.06);
  --shadow-sm: 0 1px 3px rgba(3, 34, 56, 0.08), 0 1px 2px rgba(3, 34, 56, 0.06);
  --shadow-md: 0 4px 10px -2px rgba(3, 34, 56, 0.10), 0 2px 4px -2px rgba(3, 34, 56, 0.08);
  --shadow-lg: 0 14px 24px -8px rgba(3, 34, 56, 0.14), 0 4px 8px -4px rgba(3, 34, 56, 0.08);
  --shadow-xl: 0 28px 44px -12px rgba(3, 34, 56, 0.18), 0 8px 16px -8px rgba(3, 34, 56, 0.10);

  /* Hard offset — signature */
  --shadow-hard-sm: 2px 2px 0 var(--ink);
  --shadow-hard:    4px 4px 0 var(--ink);
  --shadow-hard-lg: 6px 6px 0 var(--ink);
  --shadow-hard-blue: 4px 4px 0 var(--blue-600);
  --shadow-hard-lime: 4px 4px 0 var(--lime-500);

  /* Focus */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Semantic elevation aliases */
  --elevation-card:    var(--shadow-sm);
  --elevation-raised:  var(--shadow-md);
  --elevation-overlay: var(--shadow-lg);
  --elevation-modal:   var(--shadow-xl);
}

/* ============================================================
   Cell Peças — Motion tokens
   Energetic but controlled. A touch of spring on playful moments
   (add-to-cart, toasts); crisp standard easing everywhere else.
   ============================================================ */
:root {
  --duration-instant: 80ms;  /* @kind other */
  --duration-fast:    140ms; /* @kind other */
  --duration-base:    220ms; /* @kind other */
  --duration-slow:    340ms; /* @kind other */
  --duration-slower:  520ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);   /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard),
                       box-shadow var(--duration-fast) var(--ease-standard);
  --transition-transform: transform var(--duration-base) var(--ease-spring);
}

/* ============================================================
   Cell Peças — Base element defaults
   Gentle, brand-aware resets so any consuming page inherits the
   right typeface, text colour and selection highlight.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--heading-leading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-colors);
}
a:hover { color: var(--text-link-hover); }

strong, b { font-weight: var(--weight-semibold); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

small { font-size: var(--text-sm); }

::selection {
  background: var(--lime-300);
  color: var(--lime-950);
}

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

hr {
  border: none;
  border-top: var(--border-hairline) solid var(--border-subtle);
  margin: var(--space-6) 0;
}