/* ============================================================
   base.css — Cascade layers, OKLCH design tokens, reset,
   typography, utilities, keyframe animations
   Scanmatics Website — Royal Blue & Cream startup aesthetic
   ============================================================ */

/* Self-hosted Inter variable font — preloaded for zero-shift rendering */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Layer order: lower = weaker precedence */
@layer reset, theme, global, layout, components, utilities;

/* ============================================================
   THEME LAYER — 3-tier OKLCH Custom Properties
   ─────────────────────────────────────────────────────────────
   TIER 1  Hue primitives — change ONE variable to retheme site
   TIER 2  Named colour scales derived from hues
   TIER 3  Semantic aliases — what CSS rules actually reference
   ============================================================ */
@layer theme {
  :root {

    /* ══════════════════════════════════════════════════════════
       TIER 1 — Hue primitives
       Change --hue-primary to shift the entire site's colour
       ══════════════════════════════════════════════════════════ */
    --hue-primary:    255;   /* royal blue */
    --hue-secondary:   85;   /* cream / warm-white */
    --hue-tertiary:   200;   /* sky-teal — info, glow accents */


    /* ══════════════════════════════════════════════════════════
       TIER 2 — Named colour scales (computed from hue)
       ══════════════════════════════════════════════════════════ */

    /* ── Primary (royal blue) ── */
    --color-primary:           oklch(58% 0.26 var(--hue-primary));
    --color-primary-hover:     oklch(66% 0.26 var(--hue-primary));
    --color-primary-light:     oklch(78% 0.16 var(--hue-primary));
    --color-primary-pale:      oklch(93% 0.06 var(--hue-primary));
    --color-primary-glow:      oklch(58% 0.26 var(--hue-primary) / 0.30);
    --color-primary-subtle:    oklch(58% 0.26 var(--hue-primary) / 0.12);
    --color-primary-darkest:   oklch(10% 0.05 var(--hue-primary));
    --color-primary-darker:    oklch(16% 0.05 var(--hue-primary));
    --color-primary-dark:      oklch(22% 0.05 var(--hue-primary));
    --color-primary-mid:       oklch(28% 0.05 var(--hue-primary));

    /* ── Secondary (cream / warm-white) ── */
    --color-secondary:         oklch(96% 0.012 var(--hue-secondary));
    --color-secondary-dim:     oklch(87% 0.014 var(--hue-secondary));
    --color-secondary-bright:  oklch(99% 0.005 var(--hue-secondary));

    /* ── Tertiary (sky-teal — glow, info, secondary accents) ── */
    --color-tertiary:          oklch(70% 0.18 var(--hue-tertiary));
    --color-tertiary-glow:     oklch(70% 0.18 var(--hue-tertiary) / 0.20);


    /* ══════════════════════════════════════════════════════════
       TIER 3 — Semantic tokens (what CSS rules reference)
       ══════════════════════════════════════════════════════════ */

    /* ── Backgrounds ── */
    --color-bg:          var(--color-primary-darkest);
    --color-bg-mid:      oklch(14% 0.05 var(--hue-primary));
    --color-bg-surface:  var(--color-primary-darker);
    --color-bg-elevated: var(--color-primary-dark);
    --color-bg-footer:   oklch(7% 0.045 var(--hue-primary));

    /* ── Accent (primary interactive colour) ── */
    --color-accent:        var(--color-primary);
    --color-accent-hover:  var(--color-primary-hover);
    --color-accent-glow:   var(--color-primary-glow);
    --color-accent-light:  var(--color-primary-light);
    --color-accent-subtle: var(--color-primary-subtle);
    --color-accent-pale:   var(--color-primary-pale);

    /* ── Text ── */
    --color-text:         var(--color-secondary);
    --color-text-dim:     var(--color-secondary-dim);
    --color-text-heading: var(--color-secondary-bright);
    --color-text-muted:   oklch(63% 0.05 var(--hue-primary));
    --color-text-steel:   oklch(68% 0.05 var(--hue-primary));

    /* ── Borders ── */
    --color-border:       oklch(26% 0.05 var(--hue-primary) / 0.5);
    --color-border-mid:   oklch(22% 0.05 var(--hue-primary) / 0.6);
    --color-border-light: oklch(84% 0.02 var(--hue-secondary));

    /* ── Surfaces ── */
    --color-surface:      oklch(12% 0.05 var(--hue-primary));
    --color-surface-card: oklch(18% 0.05 var(--hue-primary) / 0.7);

    /* ── Status ── */
    --color-success: oklch(55% 0.18 145);
    --color-error:   oklch(55% 0.22 25);

    /* ── Typography ── */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* ── Fluid type scale — clamp(min, preferred, max) ── */
    --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --text-base: clamp(1rem,     0.95rem + 0.25vw,  1.125rem);
    --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,   1.25rem);
    --text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw,  1.5rem);
    --text-2xl:  clamp(1.5rem,   1.25rem + 1.25vw,  2rem);
    --text-3xl:  clamp(1.875rem, 1.5rem  + 1.875vw, 2.5rem);
    --text-4xl:  clamp(2.25rem,  1.75rem + 2.5vw,   3.25rem);
    --text-5xl:  clamp(2.75rem,  2rem    + 3.75vw,  4.25rem);

    /* ── Fluid spacing scale ── */
    --space-2xs: clamp(0.25rem,  0.2rem  + 0.25vw, 0.375rem);
    --space-xs:  clamp(0.5rem,   0.45rem + 0.25vw, 0.625rem);
    --space-sm:  clamp(0.75rem,  0.65rem + 0.5vw,  1rem);
    --space-md:  clamp(1rem,     0.85rem + 0.75vw, 1.25rem);
    --space-lg:  clamp(1.25rem,  1rem    + 1.25vw, 1.75rem);
    --space-xl:  clamp(1.75rem,  1.25rem + 2.5vw,  2.5rem);
    --space-2xl: clamp(2.5rem,   1.75rem + 3.75vw, 4rem);
    --space-3xl: clamp(3.5rem,   2.5rem  + 5vw,    5.5rem);
    --space-4xl: clamp(5rem,     3.5rem  + 7.5vw,  8rem);

    /* ── Layout ── */
    --max-width:      75rem;
    --content-width:  47.5rem;
    --gutter:         clamp(1rem, 4vw, 2rem);

    /* ── Border radii ── */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   1rem;
    --radius-xl:   1.5rem;
    --radius-full: 9999px;

    /* ── Shadows (oklch-based) ── */
    --shadow-xs:   0 1px 2px oklch(0% 0 0 / 0.15);
    --shadow-sm:   0 1px 4px oklch(0% 0 0 / 0.2),
                   0 2px 8px oklch(0% 0 0 / 0.15);
    --shadow-md:   0 2px 8px oklch(0% 0 0 / 0.25),
                   0 4px 16px oklch(0% 0 0 / 0.18);
    --shadow-lg:   0 4px 16px oklch(0% 0 0 / 0.3),
                   0 8px 32px oklch(0% 0 0 / 0.22);
    --shadow-card: var(--shadow-sm);
    --shadow-card-hover: var(--shadow-md);
    --shadow-glow-primary: 0 0 20px var(--color-accent-glow),
                           0 0 40px var(--color-tertiary-glow);

    /* ── Motion ── */
    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   350ms;
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index scale ── */
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-nav:       300;
    --z-modal:     400;
    --z-toast:     500;
  }
}

/* ============================================================
   RESET LAYER
   ============================================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: 93%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    hanging-punctuation: first last;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  p, li, figcaption {
    overflow-wrap: break-word;
    text-wrap: pretty;
    max-width: 70ch;
  }

  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
  }

  fieldset {
    border: none;
    padding: 0;
  }
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes border-pulse {
  0%, 100% { border-color: var(--color-accent-glow); }
  50%       { border-color: var(--color-accent); }
}

@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes beam-sweep {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-20deg); opacity: 0; }
}


/* ============================================================
   GLOBAL LAYER — Dark-first base typographic & element styles
   ============================================================ */
@layer global {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
  }

  /* ── Headings — bright white on dark ── */
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-text-heading);
    letter-spacing: -0.02em;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  h5 { font-size: var(--text-lg); }
  h6 { font-size: var(--text-base); }

  /* ── Links ── */
  a:not([class]) {
    color: var(--color-accent-light);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) var(--ease-out);
  }

  a:not([class]):hover {
    color: var(--color-accent-hover);
  }

  /* ── Focus visible — keyboard accessible ── */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* ── Prose content within articles ── */
  .prose {
    max-width: var(--content-width);
  }

  .prose h2 { margin-block-start: var(--space-2xl); }
  .prose h3 { margin-block-start: var(--space-xl); }
  .prose p  { margin-block-start: var(--space-md); }

  .prose ul,
  .prose ol {
    margin-block-start: var(--space-md);
    padding-inline-start: var(--space-xl);
  }

  .prose li { margin-block-start: var(--space-xs); }

  .prose strong {
    font-weight: 600;
    color: var(--color-text-heading);
  }

  .prose blockquote {
    margin-block: var(--space-xl);
    padding-inline: var(--space-lg);
    border-inline-start: 4px solid var(--color-accent);
    color: var(--color-text-steel);
    font-style: italic;
  }

  .prose a {
    color: var(--color-accent-light);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .prose a:hover {
    color: var(--color-accent-hover);
  }

  .prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    background: oklch(20% 0.05 var(--hue-primary));
    border-radius: var(--radius-sm);
    color: var(--color-accent-light);
  }

  /* ── Selection styling ── */
  ::selection {
    background: var(--color-accent);
    color: var(--color-text-heading);
  }

  /* ── Horizontal rule ── */
  hr {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-xl);
  }

  /* ── Scroll-triggered animation base ── */
  [data-animate] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
  }

  [data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Staggered animation delays for grid children ── */
  [data-animate]:nth-child(2) { transition-delay: 80ms; }
  [data-animate]:nth-child(3) { transition-delay: 160ms; }
  [data-animate]:nth-child(4) { transition-delay: 240ms; }
  [data-animate]:nth-child(5) { transition-delay: 320ms; }
  [data-animate]:nth-child(6) { transition-delay: 400ms; }

  @media (prefers-reduced-motion: reduce) {
    [data-animate] {
      opacity: 1;
      transform: none;
      transition-delay: 0ms !important;
    }
  }
}

/* ============================================================
   UTILITIES LAYER
   ============================================================ */
@layer utilities {
  /* ── Container ── */
  .container {
    width: min(var(--max-width), 100% - (var(--gutter) * 2));
    margin-inline: auto;
  }

  /* ── Visually hidden (accessible) ── */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* ── Display ── */
  .block   { display: block; }
  .flex    { display: flex; }
  .grid    { display: grid; }
  .hidden  { display: none; }

  /* ── Flex helpers ── */
  .items-center    { align-items: center; }
  .items-start     { align-items: flex-start; }
  .justify-center  { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .gap-sm  { gap: var(--space-sm); }
  .gap-md  { gap: var(--space-md); }
  .gap-lg  { gap: var(--space-lg); }
  .gap-xl  { gap: var(--space-xl); }

  /* ── Text align ── */
  .text-center { text-align: center; }
  .text-left   { text-align: left; }

  /* ── Color utilities ── */
  .text-muted  { color: var(--color-text-muted); }
  .text-steel  { color: var(--color-text-steel); }
  .text-accent { color: var(--color-accent); }
  .text-cream  { color: var(--color-text); }
  /* Legacy aliases */
  .text-amber  { color: var(--color-accent); }

  /* ── Spacing helpers ── */
  .mt-auto { margin-block-start: auto; }
  .mb-md   { margin-block-end: var(--space-md); }
  .mb-lg   { margin-block-end: var(--space-lg); }

  /* ── Section padding ── */
  .section-pad {
    padding-block: var(--space-4xl);
  }

  .section-pad-sm {
    padding-block: var(--space-2xl);
  }

  /* ── Dark section (deep bg — default aesthetic) ── */
  .dark-section {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .dark-section h1,
  .dark-section h2,
  .dark-section h3,
  .dark-section h4 {
    color: var(--color-text-heading);
  }

  .dark-section p { color: var(--color-text-steel); }

  /* ── Mid section (slightly lighter bg) ── */
  .mid-section {
    background-color: var(--color-bg-mid);
    color: var(--color-text);
  }

  .mid-section h1,
  .mid-section h2,
  .mid-section h3,
  .mid-section h4 {
    color: var(--color-text-heading);
  }

  .mid-section p { color: var(--color-text-steel); }

  /* ── Tint section (cream/light background for contrast) ── */
  .tint-section {
    background-color: var(--color-secondary);
    color: var(--color-bg-elevated);
  }

  .tint-section h1,
  .tint-section h2,
  .tint-section h3,
  .tint-section h4 {
    color: var(--color-bg);
  }

  .tint-section p {
    color: oklch(30% 0.05 var(--hue-primary));
  }

  .tint-section a:not([class]) {
    color: var(--color-accent);
  }

  .tint-section a:not([class]):hover {
    color: var(--color-accent-hover);
  }

  /* ── Animated gradient text ── */
  .gradient-text {
    background: linear-gradient(
      135deg,
      var(--color-primary-light) 0%,
      var(--color-secondary-bright) 35%,
      var(--color-tertiary) 65%,
      var(--color-primary-light) 100%
    );
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 5s ease infinite;
  }

  /* ── Float animation utility ── */
  .float-item {
    animation: float 6s ease-in-out infinite;
  }

  /* ── Grid helpers ── */
  .two-col {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
  }

  @media (min-width: 48rem) {
    .two-col {
      grid-template-columns: 1fr 1fr;
    }
  }

  .three-col {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 40rem) {
    .three-col { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 60rem) {
    .three-col { grid-template-columns: repeat(3, 1fr); }
  }

  .four-col {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 40rem) {
    .four-col { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 60rem) {
    .four-col { grid-template-columns: repeat(4, 1fr); }
  }
}