/* =============================================================
   PianoFlow Design System — Studio Grand · iOS 26 Liquid Glass

   Canonical design tokens for PianoFlow. Built around the warm
   mahogany Studio Grand palette and an iOS 26 Liquid Glass
   material vocabulary. Dark mode is the primary surface; light
   mode is supported and uses the same accent system on a warm
   ivory base.

   Source: PianoFlow iOS app (SwiftUI) + handcrafted iPad/iPhone
   recreations the team has approved. See README.md.
   ============================================================= */

:root {
  /* ---------------------------------------------------------------
     COLOR — WARM SURFACES (the brand's ground)
     A near-black warm mahogany base in dark; warm ivory in light.
     These come from AppleTheme.swift's Studio Grand palette.
     --------------------------------------------------------------- */

  /* Dark — canonical */
  --pf-dark-bg:        #0C0A09;   /* page background */
  --pf-dark-bg-2:      #15100D;   /* faint shift used in wallpaper gradients */
  --pf-dark-surface:   #18120F;   /* card / sheet base (under glass) */
  --pf-dark-surface-2: #221915;   /* elevated card */

  /* Light */
  --pf-light-bg:       #F6F2EC;
  --pf-light-bg-2:     #EBE5FA;
  --pf-light-surface:  #FFFFFF;
  --pf-light-surface-2:#EFE9E1;

  /* Foreground — paired to the above */
  --pf-ivory:          #F7F2EC;
  --pf-ivory-dim:      rgba(247, 242, 236, 0.65);
  --pf-ivory-faint:    rgba(247, 242, 236, 0.40);
  --pf-ivory-mute:     rgba(247, 242, 236, 0.20);

  --pf-ink:            #18120F;
  --pf-ink-dim:        rgba(24, 18, 15, 0.60);
  --pf-ink-faint:      rgba(24, 18, 15, 0.35);
  --pf-ink-mute:       rgba(24, 18, 15, 0.12);

  /* ---------------------------------------------------------------
     COLOR — ACCENTS (the warm brand spectrum + functional partners)
     Orange is the primary CTA. Gold is its partner. Purple/blue/
     cyan/green/pink are role-coded (IA, info, success, etc.).
     --------------------------------------------------------------- */
  --pf-orange:         #FF6B2C;   /* primary accent · CTA · active tab · "Transcrire" */
  --pf-orange-deep:    #E8471A;   /* CTA pressed · stamp */
  --pf-orange-bright:  #FF8A4D;   /* hover lift */
  --pf-gold:           #FFBB40;   /* streak · XP · achievement */
  --pf-gold-deep:      #F39C12;
  --pf-blue:           #3B82F6;   /* metrics · info */
  --pf-cyan:           #66C7FF;   /* secondary info · falling-note R hand */
  --pf-green:          #34C759;   /* success · validation */
  --pf-purple:         #A78BFA;   /* IA Coach · machine learning */
  --pf-pink:           #FF5EA8;   /* discover / featured */
  --pf-red:            #FF3B30;   /* destructive · error */

  /* ---------------------------------------------------------------
     COLOR — PIANO ROLL (Synthesia-derived, used in the player only)
     --------------------------------------------------------------- */
  --pf-roll-bg:        #1E1A17;
  --pf-roll-left:      #FF6B2C;   /* left hand uses brand orange */
  --pf-roll-right:     #66C7FF;   /* right hand cyan */
  --pf-roll-both:      #FFBB40;
  --pf-felt:           #C92A2A;   /* red felt strip above keys */
  --pf-key-white:      #F0E6D8;   /* warm ivory keys */
  --pf-key-black:      #1A1410;

  /* ---------------------------------------------------------------
     COLOR — DIFFICULTY (mapped to the accent system, not separate)
     --------------------------------------------------------------- */
  --pf-diff-debutant:      #34C759;   /* green */
  --pf-diff-intermediaire: #FFBB40;   /* gold */
  --pf-diff-avance:        #FF6B2C;   /* orange */
  --pf-diff-expert:        #A78BFA;   /* purple */

  /* ---------------------------------------------------------------
     SEMANTIC (alias the accents above; never hard-code)
     --------------------------------------------------------------- */
  --pf-success: var(--pf-green);
  --pf-warning: var(--pf-gold);
  --pf-error:   var(--pf-red);
  --pf-info:    var(--pf-blue);

  /* ---------------------------------------------------------------
     LIQUID GLASS — material tokens
     The defining surface of the system. Two flavors: subtle (default
     card) and strong (heroes, modals, the iPhone tab bar island).

     CSS variables for backdrop-filter values; apply on the element
     itself. The blur+saturate combo is the iOS 26 look.
     --------------------------------------------------------------- */
  --pf-glass-blur:           blur(18px) saturate(180%);
  --pf-glass-blur-strong:    blur(28px) saturate(200%);
  --pf-glass-blur-thin:      blur(10px) saturate(160%);

  /* Tints — apply as `background` on dark surfaces */
  --pf-glass-dark-tint:      rgba(255, 255, 255, 0.06);
  --pf-glass-dark-tint-2:    rgba(255, 255, 255, 0.10);   /* stronger */
  --pf-glass-light-tint:     rgba(255, 255, 255, 0.65);
  --pf-glass-light-tint-2:   rgba(255, 255, 255, 0.80);

  /* Hairlines */
  --pf-glass-dark-border:    0.5px solid rgba(255, 255, 255, 0.14);
  --pf-glass-light-border:   0.5px solid rgba(24, 18, 15, 0.10);

  /* Inset shines (the "wet" highlight on the top-left edge) */
  --pf-glass-dark-shine:
      inset 1px 1px 0 rgba(255, 255, 255, 0.08),
      inset -1px -1px 0 rgba(0, 0, 0, 0.12);
  --pf-glass-light-shine:
      inset 1px 1px 0 rgba(255, 255, 255, 0.90),
      inset -1px -1px 0 rgba(0, 0, 0, 0.04);

  /* ---------------------------------------------------------------
     WALLPAPERS — multi-layer radial gradients
     These ARE the brand's background. Apply directly to the body
     or to a full-bleed container; the glass cards float over them.

     Dark = warm mahogany with orange + plum corner lights.
     Light = soft ivory with lilac + cool corner lights.
     --------------------------------------------------------------- */
  --pf-wall-dark:
      radial-gradient(ellipse at 20% 20%, #3A1A0A 0%, transparent 50%),
      radial-gradient(ellipse at 80% 70%, #1A0F2B 0%, transparent 55%),
      radial-gradient(ellipse at 50% 100%, #2A0F08 0%, transparent 60%),
      linear-gradient(180deg, #0C0A09 0%, #18120F 100%);

  --pf-wall-light:
      radial-gradient(ellipse at 20% 10%, #E8D4FF 0%, transparent 45%),
      radial-gradient(ellipse at 85% 85%, #D4D8FF 0%, transparent 55%),
      radial-gradient(ellipse at 50% 55%, #F0EBFF 0%, transparent 60%),
      linear-gradient(180deg, #F5F0FF 0%, #EBE5FA 100%);

  /* ---------------------------------------------------------------
     GRADIENTS — signature treatments
     --------------------------------------------------------------- */
  --pf-grad-cta:
      linear-gradient(135deg, #FF6B2C 0%, #FFBB40 100%);
  --pf-grad-cta-deep:
      linear-gradient(135deg, #FF6B2C 0%, #E8471A 100%);
  --pf-grad-hero-transcribe:
      linear-gradient(135deg, #FF6B2C 0%, #FFBB40 60%, #E8471A 100%);
  --pf-grad-hero-resume:
      linear-gradient(135deg, #2A1A14 0%, #0C0A09 55%, #1A0F2B 100%);
  --pf-grad-ai:
      linear-gradient(135deg, #A78BFA 0%, #3B82F6 100%);
  --pf-grad-gold:
      linear-gradient(135deg, #FFBB40 0%, #F39C12 100%);

  /* ---------------------------------------------------------------
     TYPOGRAPHY
     iOS-native — SF Pro / SF Pro Rounded via system stacks.
     Headlines use heavy weights (700–800) with negative tracking.
     --------------------------------------------------------------- */
  --pf-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "SF Pro", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --pf-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system,
                  BlinkMacSystemFont, system-ui, sans-serif;
  --pf-font-mono: ui-monospace, "SF Mono", Menlo, Consolas,
                  "Roboto Mono", monospace;

  /* The ramp. Note: PianoFlow leans bigger than HIG on headlines —
     hero text routinely runs 32–40px with 800 weight. */
  --pf-size-hero:        40px;   /* "Axel, prêt à jouer ?" */
  --pf-size-display:     32px;   /* iPad H1, screen titles */
  --pf-size-title1:      28px;
  --pf-size-title2:      22px;
  --pf-size-title3:      18px;
  --pf-size-headline:    16px;
  --pf-size-body:        14px;
  --pf-size-callout:     13px;
  --pf-size-footnote:    12px;
  --pf-size-caption:     11px;
  --pf-size-overline:    10px;   /* uppercase, letter-spaced labels */

  --pf-weight-regular:   400;
  --pf-weight-medium:    500;
  --pf-weight-semibold:  600;
  --pf-weight-bold:      700;
  --pf-weight-heavy:     800;

  --pf-track-hero:       -0.03em;
  --pf-track-tight:      -0.02em;
  --pf-track-snug:       -0.01em;
  --pf-track-default:    0;
  --pf-track-overline:   0.08em;

  --pf-leading-tight:    1.05;   /* hero */
  --pf-leading-snug:     1.20;
  --pf-leading-normal:   1.40;
  --pf-leading-relaxed:  1.55;

  /* ---------------------------------------------------------------
     SPACING — 4-pt grid (Apple HIG)
     --------------------------------------------------------------- */
  --pf-space-1:  4px;
  --pf-space-2:  8px;
  --pf-space-3:  12px;
  --pf-space-4:  16px;
  --pf-space-5:  20px;
  --pf-space-6:  24px;
  --pf-space-7:  28px;
  --pf-space-8:  32px;
  --pf-space-10: 40px;
  --pf-space-12: 48px;
  --pf-space-16: 64px;
  --pf-space-20: 80px;

  /* ---------------------------------------------------------------
     RADII — generous, iOS-soft
     --------------------------------------------------------------- */
  --pf-radius-xs:     6px;    /* tag/badge */
  --pf-radius-sm:     10px;
  --pf-radius-pill:   12px;   /* small pill */
  --pf-radius-input:  14px;   /* search field */
  --pf-radius-card:   16px;   /* default glass card */
  --pf-radius-card-lg:18px;   /* song-card artwork on iPad */
  --pf-radius-tile:   20px;
  --pf-radius-hero:   28px;   /* hero card / song-detail artwork */
  --pf-radius-island: 32px;   /* iPhone tab bar Liquid Glass island */
  --pf-radius-full:   9999px;

  /* ---------------------------------------------------------------
     SHADOWS — generous, warm-tinted
     --------------------------------------------------------------- */
  --pf-shadow-1: 0 4px 12px rgba(0, 0, 0, 0.18);                  /* small lift */
  --pf-shadow-2: 0 8px 20px rgba(0, 0, 0, 0.30);                  /* card */
  --pf-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.40);                 /* sheet */
  --pf-shadow-cta:    0 8px 20px rgba(255, 107, 44, 0.45);        /* orange CTA */
  --pf-shadow-cta-lg: 0 10px 30px rgba(255, 107, 44, 0.55);
  --pf-shadow-ai:     0 6px 18px rgba(167, 139, 250, 0.40);
  --pf-shadow-gold:   0 6px 18px rgba(255, 187, 64, 0.40);

  /* ---------------------------------------------------------------
     MOTION — iOS native springs + soft fades
     --------------------------------------------------------------- */
  --pf-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --pf-ease-out:       cubic-bezier(0.16, 1, 0.30, 1);
  --pf-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --pf-duration-fast:  0.18s;
  --pf-duration-base:  0.3s;

  /* ---------------------------------------------------------------
     THEMED ALIASES — flip via [data-theme="light"] override below.
     Use these in product code; never reach for raw ivory/ink.
     --------------------------------------------------------------- */
  --pf-fg:           var(--pf-ivory);
  --pf-fg-dim:       var(--pf-ivory-dim);
  --pf-fg-faint:     var(--pf-ivory-faint);
  --pf-bg:           var(--pf-dark-bg);
  --pf-surface:      var(--pf-dark-surface);
  --pf-surface-2:    var(--pf-dark-surface-2);
  --pf-wall:         var(--pf-wall-dark);
  --pf-glass-tint-active:   var(--pf-glass-dark-tint);
  --pf-glass-tint-strong:   var(--pf-glass-dark-tint-2);
  --pf-glass-border-active: var(--pf-glass-dark-border);
  --pf-glass-shine:         var(--pf-glass-dark-shine);
  --pf-hairline-active:     rgba(255, 255, 255, 0.10);
  --pf-statusbar-fg:        #fff;
}

[data-theme="light"], :root[data-theme="light"] {
  --pf-fg:           var(--pf-ink);
  --pf-fg-dim:       var(--pf-ink-dim);
  --pf-fg-faint:     var(--pf-ink-faint);
  --pf-bg:           var(--pf-light-bg);
  --pf-surface:      var(--pf-light-surface);
  --pf-surface-2:    var(--pf-light-surface-2);
  --pf-wall:         var(--pf-wall-light);
  --pf-glass-tint-active:   var(--pf-glass-light-tint);
  --pf-glass-tint-strong:   var(--pf-glass-light-tint-2);
  --pf-glass-border-active: var(--pf-glass-light-border);
  --pf-glass-shine:         var(--pf-glass-light-shine);
  --pf-hairline-active:     rgba(24, 18, 15, 0.10);
  --pf-statusbar-fg:        var(--pf-ink);
}

/* ===============================================================
   SEMANTIC ELEMENT STYLES — sensible HTML defaults for mocks
   =============================================================== */

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--pf-font-sans);
  font-size: var(--pf-size-body);
  line-height: var(--pf-leading-normal);
  color: var(--pf-ivory);
  background: var(--pf-dark-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-theme="light"] {
  color: var(--pf-ink);
  background: var(--pf-light-bg);
}

/* Type classes */
.pf-hero {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-size-hero);
  font-weight: var(--pf-weight-heavy);
  line-height: var(--pf-leading-tight);
  letter-spacing: var(--pf-track-hero);
}
.pf-display {
  font-size: var(--pf-size-display);
  font-weight: var(--pf-weight-heavy);
  line-height: var(--pf-leading-tight);
  letter-spacing: var(--pf-track-hero);
}
.pf-title1 {
  font-size: var(--pf-size-title1);
  font-weight: var(--pf-weight-bold);
  line-height: var(--pf-leading-snug);
  letter-spacing: var(--pf-track-tight);
}
.pf-title2 {
  font-size: var(--pf-size-title2);
  font-weight: var(--pf-weight-bold);
  line-height: var(--pf-leading-snug);
  letter-spacing: var(--pf-track-tight);
}
.pf-title3 {
  font-size: var(--pf-size-title3);
  font-weight: var(--pf-weight-bold);
  letter-spacing: var(--pf-track-snug);
}
.pf-headline {
  font-size: var(--pf-size-headline);
  font-weight: var(--pf-weight-bold);
  letter-spacing: var(--pf-track-snug);
}
.pf-body { font-size: var(--pf-size-body); font-weight: var(--pf-weight-medium); }
.pf-callout { font-size: var(--pf-size-callout); font-weight: var(--pf-weight-medium); }
.pf-footnote { font-size: var(--pf-size-footnote); font-weight: var(--pf-weight-medium); color: var(--pf-ivory-dim); }
.pf-caption { font-size: var(--pf-size-caption); color: var(--pf-ivory-faint); }
.pf-overline {
  font-size: var(--pf-size-overline);
  font-weight: var(--pf-weight-bold);
  letter-spacing: var(--pf-track-overline);
  text-transform: uppercase;
  color: var(--pf-ivory-dim);
}
.pf-mono {
  font-family: var(--pf-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Wordmark — used in welcome + paywall + about */
.pf-wordmark {
  font-family: var(--pf-font-sans);
  font-weight: var(--pf-weight-heavy);
  letter-spacing: var(--pf-track-snug);
}
.pf-wordmark .piano { color: currentColor; }
.pf-wordmark .flow {
  background: var(--pf-grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===============================================================
   PRIMITIVE COMPONENTS — drop-in CSS classes
   =============================================================== */

/* Liquid Glass card (dark) */
.pf-glass {
  position: relative;
  background: var(--pf-glass-dark-tint);
  backdrop-filter: var(--pf-glass-blur);
  -webkit-backdrop-filter: var(--pf-glass-blur);
  border: var(--pf-glass-dark-border);
  border-radius: var(--pf-radius-card);
  box-shadow: var(--pf-glass-dark-shine);
  overflow: hidden;
}
.pf-glass--light {
  background: var(--pf-glass-light-tint);
  border: var(--pf-glass-light-border);
  box-shadow: var(--pf-glass-light-shine);
  color: var(--pf-ink);
}
.pf-glass--strong { box-shadow: var(--pf-glass-dark-shine), var(--pf-shadow-3); }

/* Primary CTA */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  border: none; cursor: pointer;
  font-family: var(--pf-font-sans);
  font-weight: var(--pf-weight-bold);
  letter-spacing: var(--pf-track-snug);
  transition: transform var(--pf-duration-fast) var(--pf-ease-spring),
              filter var(--pf-duration-fast) var(--pf-ease-out),
              box-shadow var(--pf-duration-base) var(--pf-ease-out);
}
.pf-btn:active { transform: scale(0.97); }
.pf-btn:hover  { filter: brightness(1.07); }

.pf-btn--primary {
  height: 48px; padding: 0 22px; border-radius: var(--pf-radius-input);
  background: var(--pf-orange);
  color: #fff;
  font-size: 15px;
  box-shadow: var(--pf-shadow-cta);
}
.pf-btn--primary-gradient {
  height: 48px; padding: 0 22px; border-radius: var(--pf-radius-input);
  background: var(--pf-grad-cta);
  color: #fff;
  font-size: 15px;
  box-shadow: var(--pf-shadow-cta);
}
.pf-btn--white-on-color {
  height: 48px; padding: 0 22px; border-radius: var(--pf-radius-input);
  background: #fff;
  color: var(--pf-orange-deep);
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.pf-btn--ghost {
  height: 44px; padding: 0 16px; border-radius: var(--pf-radius-input);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 14px;
}

/* Chip (filter / category) */
.pf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px;
  border-radius: var(--pf-radius-full);
  background: rgba(255,255,255,0.08);
  color: var(--pf-ivory-dim);
  border: none;
  font-family: var(--pf-font-sans);
  font-weight: var(--pf-weight-bold);
  font-size: 13px;
  cursor: pointer;
}
.pf-chip[data-active="true"] {
  background: var(--pf-orange);
  color: #fff;
}

/* Overline label */
.pf-overline { color: var(--pf-ivory-dim); }