/* Plimora Brand Tokens v0.1 — Mode C, Lazyweb-validated 2026-05-10 */
/* Reference patterns: Substack #FF6719, HubSpot #FF7A59, Amie.so contemporary slate */

:root {
  /* Core palette */
  --p-primary:    #0F172A;   /* slate-чорний — headlines, navbar, strong text */
  --p-accent:     #E94B3C;   /* warm coral — CTAs, hover, brand mark */
  --p-bg:         #FAFAF7;   /* warm off-white — main background */
  --p-text:       #1F1B16;   /* near-black warm — body text */
  --p-muted:      #5A6378;   /* slate grey — secondary text, dividers */
  --p-highlight:  #F8E5DD;   /* peach-cream — cards, hover states */
  --p-surface:    #FFFFFF;   /* pure white — cards on bg */

  /* Semantic tokens */
  --p-cta-bg:           var(--p-accent);
  --p-cta-text:         #FFFFFF;
  --p-cta-hover:        #D43A2A;        /* coral darker -10% */
  --p-link:             var(--p-accent);
  --p-link-hover:       var(--p-cta-hover);
  --p-border:           #E5E5DD;
  --p-border-subtle:    #EFEFE8;

  /* Spacing rhythm (4/8 grid) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-2xl: 96px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, .08), 0 12px 32px rgba(15, 23, 42, .06);

  /* Typography scale (modular 1.25) */
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;     /* body default */
  --text-lg:   21px;
  --text-xl:   28px;
  --text-2xl:  36px;     /* h2 */
  --text-3xl:  48px;     /* h1 desktop */
  --text-hero: 64px;     /* hero h1 */

  /* Line heights */
  --lh-tight:  1.1;     /* hero, h1 */
  --lh-snug:   1.25;    /* h2, h3 */
  --lh-base:   1.55;    /* body */

  /* Animation */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-sm: 150ms;
  --duration-md: 250ms;
  --duration-lg: 400ms;

  /* Fonts (Google Fonts free) */
  --font-display: 'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
}

/* Dark mode optional (TBD post-launch decision) */
[data-theme="dark"] {
  --p-primary:    #FAFAF7;
  --p-bg:         #0A0E1A;
  --p-text:       #E5E5DD;
  --p-surface:    #141926;
  --p-highlight:  #1F2536;
  --p-border:     #1F2536;
  --p-border-subtle: #141926;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--p-text);
  background: var(--p-bg);
  margin: 0;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  color: var(--p-primary);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: -0.015em; }
h3 { font-size: var(--text-xl); line-height: var(--lh-snug); }

/* Hero h1 override */
.hero h1 { font-size: var(--text-hero); }

@media (max-width: 768px) {
  .hero h1 { font-size: var(--text-2xl); }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

/* Primary CTA pattern */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px 24px;
  background: var(--p-cta-bg);
  color: var(--p-cta-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-sm) var(--ease-out), transform var(--duration-sm) var(--ease-out);
}
.cta-primary:hover { background: var(--p-cta-hover); transform: translateY(-1px); }
.cta-primary:active { transform: translateY(0); }

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 13px 23px;
  background: transparent;
  color: var(--p-primary);
  font-weight: var(--weight-medium);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.cta-secondary:hover { background: var(--p-highlight); border-color: var(--p-accent); }