/* ============================================================
   SQUIDTRONIC — Design Tokens, Reset & Base
   ============================================================ */

:root {
  --c-brand:        #0a1628;
  --c-brand-light:  #132040;
  --c-accent:       #00d4aa;
  --c-accent-hover: #00eabb;
  --c-accent-dark:  #008a6e;
  --c-cart-green:   #22c55e;
  --c-cart-hover:   #16a34a;
  --c-price:        #e63946;
  --c-sale:         #dc2626;
  --c-star:         #f59e0b;
  --c-info:         #3b82f6;
  --c-success:      #22c55e;
  --c-warning:      #f59e0b;
  --c-danger:       #ef4444;

  --c-bg:           #f3f4f6;
  --c-bg-white:     #ffffff;
  --c-bg-card:      #ffffff;
  --c-border:       #e5e7eb;
  --c-border-light: #f0f0f0;

  --c-text:         #1f2937;
  --c-text-mid:     #4b5563;
  --c-text-dim:     #6b7280;
  --c-text-light:   #737b8b;
  --c-text-inv:     #ffffff;

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;

  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-full:9999px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:  0 4px 16px rgba(0,0,0,.1);
  --shadow-xl:  0 8px 32px rgba(0,0,0,.12);

  --header-h:   64px;
  --catnav-h:   44px;
  --container:   1280px;

  --accent: var(--c-accent);
  --success: var(--c-success);
  --text-light: var(--c-text-dim);
  --text-lighter: var(--c-text-light);
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--c-accent);color:var(--c-brand)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Skip Link ---------- */
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:12px 24px;background:var(--c-accent);color:var(--c-brand);font-weight:700;font-size:var(--text-sm);border-radius:0 0 var(--radius-md) var(--radius-md);text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}

/* ---------- Focus-visible ---------- */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--radius-sm)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.header a:focus-visible,.header button:focus-visible,.catnav a:focus-visible,.footer a:focus-visible,.footer button:focus-visible{outline-color:#fff;outline-offset:3px}
.p-card__add-btn:focus-visible{outline-color:var(--c-brand);outline-offset:2px}
.hero__btn:focus-visible{outline-color:#fff;outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--c-accent);outline-offset:0;box-shadow:0 0 0 3px rgba(0,212,170,.2)}