/* ============================================================
   Palm Management — Colors & Type tokens
   Dark luxury aesthetic. Blush pink accent. Film-grain warmth.
   ============================================================ */

/* ----- Web fonts (Google-hosted; copies in /fonts/ if offline) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Sora:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ─── Base colors ─── */
  --background: #060606;            /* near-black page bg */
  --foreground: #f0ece8;            /* warm off-white text */

  /* Accent — palm pink */
  --palm-pink:       #E8A0A0;
  --palm-pink-light: #F5C6C6;
  --palm-pink-dark:  #C47A7A;

  /* Neutral scale (derived from white alpha over #060606) */
  --white-2:  rgba(255,255,255,0.02);
  --white-3:  rgba(255,255,255,0.03);
  --white-5:  rgba(255,255,255,0.05);
  --white-8:  rgba(255,255,255,0.08);
  --white-10: rgba(255,255,255,0.10);
  --white-15: rgba(255,255,255,0.15);
  --white-30: rgba(255,255,255,0.30);

  --muted: #7a7a7a;                 /* body-muted text */
  --muted-strong: #9a9a9a;

  /* Glass surfaces */
  --card-bg:     rgba(255,255,255,0.03);
  --card-border: rgba(255,255,255,0.06);
  --card-border-hover: rgba(232,160,160,0.15);

  /* ─── Semantic foreground ─── */
  --fg-1: var(--foreground);        /* primary text/headlines */
  --fg-2: var(--muted);             /* secondary / body */
  --fg-3: rgba(255,255,255,0.30);   /* tertiary / eyebrow labels */
  --fg-4: rgba(255,255,255,0.15);   /* fine print, placeholders */
  --fg-accent: var(--palm-pink);
  --fg-accent-60: rgba(232,160,160,0.60);
  --fg-accent-40: rgba(232,160,160,0.40);

  /* ─── Typography ─── */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (display) */
  --text-display-xl:  clamp(3rem, 7vw, 5.25rem);   /* hero — 48→84 */
  --text-display-lg:  clamp(2.25rem, 5vw, 3.75rem); /* h1 — 36→60 */
  --text-display-md:  clamp(1.875rem, 4vw, 3rem);   /* h2 — 30→48 */
  --text-display-sm:  1.5rem;                       /* h3 — 24 */

  --text-body-lg: 1.125rem;   /* 18 — intro paragraphs */
  --text-body:    1rem;       /* 16 */
  --text-body-sm: 0.875rem;   /* 14 — card body */
  --text-caption: 0.75rem;    /* 12 — meta */
  --text-micro:   0.625rem;   /* 10 — eyebrow, tracking-heavy */

  /* Letter-spacing */
  --track-display: -0.015em;  /* tighten headlines */
  --track-wide:    0.15em;    /* CTAs */
  --track-eyebrow: 0.3em;     /* uppercase eyebrows */
  --track-micro:   0.4em;     /* hero eyebrow */

  /* Line-height */
  --lh-tight: 1.05;
  --lh-snug:  1.1;
  --lh-body:  1.6;

  /* ─── Motion ─── */
  --ease-stripe: cubic-bezier(0.215, 0.61, 0.355, 1);  /* the only curve, applied globally */
  --dur-hover:      300ms;  /* link color, nav backdrop */
  --dur-card:       500ms;  /* glass card, CTA glow */
  --dur-reveal:     700ms;  /* scroll-in section reveals */
  --dur-hero:       800ms;  /* hero entry */
  /* Back-compat aliases */
  --dur-fast:   var(--dur-hover);
  --dur-base:   var(--dur-card);
  --dur-slow:   var(--dur-reveal);

  /* ─── Spacing (8-pt baseline) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;  /* py-40 section rhythm */

  /* ─── Radii ─── */
  --radius-none: 0;          /* default for CTAs — Palm uses sharp edges */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ─── Shadows & glows ─── */
  --shadow-card-inset: inset 0 1px 0 0 rgba(255,255,255,0.04);
  --shadow-card-inset-hover: inset 0 1px 0 0 rgba(255,255,255,0.06);

  /* Elevation is glow-based, not drop-shadow-based. Two levels: */
  --pink-glow:       0 0 80px rgba(232,160,160,0.06);  /* ambient — cards at rest, accent sections */
  --pink-glow-hover: 0 0 30px rgba(232,160,160,0.30);  /* interactive hover — CTAs, raised cards */

  --shadow-pink-glow:   var(--pink-glow);         /* back-compat aliases */
  --shadow-pink-hover:  0 0 40px rgba(232,160,160,0.04);
  --shadow-cta-hover:   var(--pink-glow-hover);

  /* ─── Interaction states ─── */
  --state-hover-scale:   1.02;
  --state-hover-lift:    -2px;      /* translateY on glass-card hover */
  --state-focus-border:  rgba(232,160,160,0.30);
  --state-disabled-opacity: 0.50;

  /* ─── Blurs ─── */
  --blur-glass: 20px;
  --blur-nav:   12px;
  --blur-glow:  150px;

  /* ─── Max widths ─── */
  --max-copy:   42rem;     /* 672 — body column */
  --max-prose:  48rem;     /* 768 — headline columns */
  --max-page:   80rem;     /* 1280 — section gutter */

  /* ─── Gradients ─── */
  --gradient-text: linear-gradient(135deg,
    #fff 0%,
    var(--palm-pink-light) 40%,
    var(--palm-pink)       70%,
    var(--palm-pink-dark)  100%);

  --aurora-bg:
    radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(232,160,160,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 50%,  rgba(196,122,122,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 20% 60%,  rgba(245,198,198,0.03) 0%, transparent 50%),
    var(--background);

  --section-divider: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

/* ============================================================
   Base element styles — applies semantic type defaults
   ============================================================ */

html, body {
  background: var(--background);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headlines — Sora display */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-lg);
  letter-spacing: var(--track-display);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-md);
  letter-spacing: var(--track-display);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display-sm);
  letter-spacing: var(--track-display);
  line-height: 1.2;
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;      /* 18 — small card titles */
  line-height: 1.3;
  color: var(--fg-1);
}

/* Body — Inter light */
p, .p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* Eyebrow — above headlines. Uppercase, tracked, pink at 60% */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-accent-60);
}

/* Micro-eyebrow — the super-fine 10px tracking-heavy label */
.eyebrow-micro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--fg-accent-60);
}

/* CTA label */
.cta-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

/* Gradient text */
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Font utility */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }