@layer tokens, base, components, pages;

/* ==========================================================================
   Electrónica Silvio - Design tokens
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   Edit here; everything else reads from these custom properties.
   ========================================================================== */
@layer tokens {
  :root {
    /* ---------- Brand palette (raw) ---------- */
    --red-400: #ff3b36;
    --red-500: #e10600;   /* primary accent, from the original banner red */
    --red-600: #b80400;
    --red-700: #8f0300;

    --ink-950: #0a0b0e;   /* deepest background */
    --ink-900: #111318;
    --ink-800: #181b21;
    --ink-700: #242830;
    --ink-600: #343945;

    --steel-500: #8b92a0; /* muted text on dark */
    --steel-400: #a7adb9;
    --steel-300: #c9ced8; /* borders on light */
    --steel-200: #e1e4ea;
    --steel-100: #eef0f4;
    --steel-50:  #f7f8fa; /* light section background */
    --white:     #ffffff;

    --whatsapp: #25d366;
    --success:  #16a34a;
    --warning:  #f59e0b;
    --danger:   #dc2626;
    --info:     #2563eb;

    /* ---------- Semantic (default = light surface) ---------- */
    --bg: var(--white);
    --bg-alt: var(--steel-50);
    --bg-elev: var(--white);
    --fg: var(--ink-900);
    --fg-muted: #5b6270;
    --fg-subtle: #8b92a0;
    --border: var(--steel-200);
    --border-strong: var(--steel-300);
    --accent: var(--red-500);
    --accent-hover: var(--red-600);
    --accent-fg: var(--white);
    --accent-soft: color-mix(in oklab, var(--red-500) 10%, transparent);
    --ring: color-mix(in oklab, var(--red-500) 45%, transparent);

    /* ---------- Typography ---------- */
    --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
    --font-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    /* Fluid type scale (min at 360px, max at 1280px) */
    --fs-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm:  clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
    --fs-md:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-lg:  clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --fs-xl:  clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --fs-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
    --fs-4xl: clamp(2.75rem, 1.7rem + 5vw, 5.5rem);

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-body: 1.55;

    --tracking-display: -0.01em;
    --tracking-caps: 0.12em;

    /* ---------- Spacing (4px base) ---------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    --section-y: clamp(3.5rem, 6vw, 7rem);
    --container: 76rem;       /* 1216px */
    --container-narrow: 46rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    /* ---------- Shape ---------- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --skew: -6deg;            /* the "racing" slant used on accents */

    /* ---------- Elevation ---------- */
    --shadow-sm: 0 1px 2px rgb(10 11 14 / 0.06), 0 1px 3px rgb(10 11 14 / 0.08);
    --shadow-md: 0 4px 12px rgb(10 11 14 / 0.08), 0 2px 4px rgb(10 11 14 / 0.06);
    --shadow-lg: 0 20px 40px -12px rgb(10 11 14 / 0.25);
    --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--red-500) 40%, transparent),
                   0 12px 40px -8px color-mix(in oklab, var(--red-500) 55%, transparent);

    /* ---------- Motion ---------- */
    --dur-fast: 150ms;
    --dur-base: 300ms;
    --dur-slow: 600ms;
    --dur-reveal: 800ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.01 55.5%, 1.005 62.7%, 1 78.4%, 1);

    /* ---------- Layers / z ---------- */
    --z-header: 50;
    --z-overlay: 100;
    --z-toast: 200;

    color-scheme: light;
  }

  /* Dark surface: apply to any section with data-surface="dark" or the whole body */
  [data-surface="dark"],
  body[data-theme="dark"] {
    --bg: var(--ink-950);
    --bg-alt: var(--ink-900);
    --bg-elev: var(--ink-800);
    --fg: var(--steel-100);
    --fg-muted: var(--steel-400);
    --fg-subtle: var(--steel-500);
    --border: rgb(255 255 255 / 0.08);
    --border-strong: rgb(255 255 255 / 0.16);
    --accent-soft: color-mix(in oklab, var(--red-500) 18%, transparent);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }

  /* Accent surface: solid red band */
  [data-surface="accent"] {
    --bg: var(--red-500);
    --bg-alt: var(--red-600);
    --bg-elev: var(--red-600);
    --fg: var(--white);
    --fg-muted: rgb(255 255 255 / 0.82);
    --fg-subtle: rgb(255 255 255 / 0.65);
    --border: rgb(255 255 255 / 0.25);
    --border-strong: rgb(255 255 255 / 0.4);
    --accent: var(--white);
    --accent-hover: var(--steel-100);
    --accent-fg: var(--red-600);
    --accent-soft: rgb(255 255 255 / 0.15);
    --ring: rgb(255 255 255 / 0.5);
    color-scheme: dark;
  }
}