/* ==========================================================================
   CYCLEFIX — THEME TOKENS
   Industrial Red Theme
   ========================================================================== */

:root {

  /* =========================================================
     LIGHT MODE
     ========================================================= */

  --color-bg: #F5F2ED;
  --color-bg-soft: #ECE8E2;
  --color-surface: #E2DED7;
  --color-surface-raised: #FBF9F5;

  --color-heading: #242321;
  --color-text: #514E49;
  --color-muted: #7C7770;

  --color-border: #D4CEC5;

  --color-accent: #A52A2A;
  --color-accent-dark: #821F1F;
  --color-accent-soft: rgba(165, 42, 42, 0.10);

  --color-on-accent: #FFF9F5;
  --color-danger: #B42318;


  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  --font-display: 'Manrope', 'DM Sans', -apple-system, sans-serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;

  --fs-hero: clamp(2.6rem, 5vw + 1rem, 4.6rem);
  --fs-h1: clamp(2.1rem, 3vw + 1rem, 3.1rem);
  --fs-h2: clamp(1.7rem, 2vw + 1rem, 2.35rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);

  --fs-lead: clamp(1.05rem, 0.6vw + 0.9rem, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.12;
  --lh-heading: 1.28;
  --lh-body: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;


  /* =========================================================
     SPACING
     ========================================================= */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;


  /* =========================================================
     LAYOUT
     ========================================================= */

  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);


  /* =========================================================
     SHAPE
     ========================================================= */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;


  /* =========================================================
     SHADOWS
     ========================================================= */

  --shadow-sm: 0 1px 2px rgba(36, 35, 33, 0.06);
  --shadow-md: 0 8px 24px rgba(36, 35, 33, 0.08);
  --shadow-lg: 0 20px 48px rgba(36, 35, 33, 0.14);


  /* =========================================================
     MOTION
     ========================================================= */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;


  /* =========================================================
     HEADER
     ========================================================= */

  --header-h: 84px;
  --header-h-scrolled: 68px;

  color-scheme: light;
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme='dark'] {

  --color-bg: #171515;
  --color-bg-soft: #211B1B;

  --color-surface: #292222;
  --color-surface-raised: #302727;

  --color-heading: #F3EEEA;
  --color-text: #CEC5C0;
  --color-muted: #958B86;

  --color-border: #403737;

  --color-accent: #C94A46;
  --color-accent-dark: #A93632;
  --color-accent-soft: rgba(201, 74, 70, 0.16);

  --color-on-accent: #171515;

  --color-danger: #E16D60;


  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.35);

  --shadow-md:
    0 8px 24px rgba(0, 0, 0, 0.38);

  --shadow-lg:
    0 24px 56px rgba(0, 0, 0, 0.50);

  color-scheme: dark;
}


/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }

}

/* CYCLEFIX — THEME TOKENS */
:root{--color-bg:#F5F2ED;--color-bg-soft:#ECE8E2;--color-surface:#E2DED7;--color-surface-raised:#FBF9F5;--color-heading:#242321;--color-text:#514E49;--color-muted:#7C7770;--color-border:#D4CEC5;--color-accent:#A52A2A;--color-accent-dark:#821F1F;--color-accent-soft:rgba(165,42,42,.10);--color-on-accent:#FFF9F5;--color-danger:#B42318;--font-display:'Manrope','DM Sans',-apple-system,sans-serif;--font-body:'DM Sans',-apple-system,sans-serif;--fs-hero:clamp(2.6rem,5vw + 1rem,4.6rem);--fs-h1:clamp(2.1rem,3vw + 1rem,3.1rem);--fs-h2:clamp(1.7rem,2vw + 1rem,2.35rem);--fs-h3:clamp(1.25rem,1vw + 1rem,1.5rem);--fs-lead:clamp(1.05rem,.6vw + .9rem,1.2rem);--fs-body:1rem;--fs-small:.875rem;--fs-tiny:.75rem;--lh-tight:1.12;--lh-heading:1.28;--lh-body:1.7;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--space-3xs:.25rem;--space-2xs:.5rem;--space-xs:.75rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2.25rem;--space-xl:3.5rem;--space-2xl:5.5rem;--space-3xl:8rem;--container-max:1240px;--container-pad:clamp(1.25rem,4vw,2.5rem);--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--shadow-sm:0 1px 2px rgba(36,35,33,.06);--shadow-md:0 8px 24px rgba(36,35,33,.08);--shadow-lg:0 20px 48px rgba(36,35,33,.14);--ease-out:cubic-bezier(.16,1,.3,1);--dur-fast:180ms;--dur-med:320ms;--dur-slow:600ms;--header-h:84px;--header-h-scrolled:68px;color-scheme:light}
[data-theme=dark]{--color-bg:#171515;--color-bg-soft:#211B1B;--color-surface:#292222;--color-surface-raised:#302727;--color-heading:#F3EEEA;--color-text:#CEC5C0;--color-muted:#958B86;--color-border:#403737;--color-accent:#C94A46;--color-accent-dark:#A93632;--color-accent-soft:rgba(201,74,70,.16);--color-on-accent:#171515;--color-danger:#E16D60;--shadow-sm:0 1px 2px rgba(0,0,0,.35);--shadow-md:0 8px 24px rgba(0,0,0,.38);--shadow-lg:0 24px 56px rgba(0,0,0,.50);color-scheme:dark}
::selection{background:var(--color-accent);color:var(--color-on-accent)}
@media(prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-med:0ms;--dur-slow:0ms}}