/* =========================================================================
   VowelPlay — Colors & Type
   =========================================================================
   The native iOS app uses SF Pro Rounded. For web, we substitute Nunito as
   the closest geometric-rounded match on Google Fonts.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand blues */
  --vp-brand-blue:          #2563EB;
  --vp-brand-blue-deep:     #1D4ED8;
  --vp-brand-blue-deepest:  #1E3A8A;
  --vp-brand-blue-ink:      #1E3A8A;
  --vp-brand-blue-light:    #93C5FD;
  --vp-brand-blue-wash:     #E8F0FE;
  --vp-brand-blue-mist:     #F4F7FE;

  /* Brand yellow / vowel slot */
  --vp-brand-yellow:        #FCD34D;
  --vp-amber-deep:          #92400E;
  --vp-amber-ink:           #92400E;
  --vp-amber-fill:          #FEF3C7;
  --vp-amber-fill-soft:     #FEF9E8;

  /* Greens */
  --vp-success-green:       #10B981;
  --vp-success-deep:        #065F46;
  --vp-success-ink:         #065F46;
  --vp-success-fill:        #D1FAE5;
  --vp-success-soft:        #6EE7B7;

  /* Orange */
  --vp-orange-deep:         #9A3412;
  --vp-orange-ink:          #9A3412;
  --vp-orange-fill:         #FEE2C0;

  /* Placed-vowel pairing */
  --vp-placed-fill:         #DBEAFE;
  --vp-placed-text:         #1E40AF;

  /* Neutrals */
  --vp-surface:             #FFFFFF;
  --vp-surface-elevated:    #F2F2F7;
  --vp-surface-tertiary:    #E5E5EA;
  --vp-text-primary:        #0F172A;
  --vp-text-secondary:      #6B7280;
  --vp-text-tertiary:       #9CA3AF;
  --vp-divider:             #DCE2EC;
  --vp-border-subtle:       #E5E7EB;

  /* Semantic aliases */
  --vp-bg:                  var(--vp-surface);
  --vp-fg:                  var(--vp-text-primary);
  --vp-fg-muted:            var(--vp-text-secondary);
  --vp-accent:              var(--vp-brand-blue);
  --vp-accent-deep:         var(--vp-brand-blue-deep);
  --vp-accent-on:           #FFFFFF;
  --vp-vowel-slot:          var(--vp-brand-yellow);

  /* Typography */
  --vp-font-rounded:        "Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
                            "SF Pro Text", system-ui, sans-serif;
  --vp-font-mono:           "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Type scale */
  --vp-text-display:        56px;
  --vp-text-large:          34px;
  --vp-text-title:          22px;
  --vp-text-headline:       17px;
  --vp-text-body:           16px;
  --vp-text-subhead:        15px;
  --vp-text-tile:           22px;
  --vp-text-tile-large:     26px;
  --vp-text-caption:        12px;
  --vp-text-caption-2:      11px;

  /* Weights */
  --vp-weight-regular:      400;
  --vp-weight-medium:       500;
  --vp-weight-semibold:     600;
  --vp-weight-bold:         700;
  --vp-weight-heavy:        800;
  --vp-weight-black:        900;

  /* Line heights */
  --vp-line-tight:          1.1;
  --vp-line-snug:           1.25;
  --vp-line-normal:         1.4;
  --vp-line-relaxed:        1.5;

  /* Spacing */
  --vp-space-xs:            4px;
  --vp-space-s:             8px;
  --vp-space-m:             12px;
  --vp-space-l:             16px;
  --vp-space-xl:            24px;
  --vp-space-xxl:           32px;
  --vp-space-3xl:           48px;

  /* Radii */
  --vp-radius-cell:         6px;
  --vp-radius-tile:         12px;
  --vp-radius-card:         16px;
  --vp-radius-sheet:        20px;
  --vp-radius-pill:         999px;

  /* Shadows */
  --vp-shadow-tile:         0 2px 4px rgba(15, 23, 42, 0.06);
  --vp-shadow-card:         0 1px 3px rgba(15, 23, 42, 0.06),
                            0 4px 12px rgba(15, 23, 42, 0.04);
  --vp-shadow-sheet:        0 12px 32px rgba(15, 23, 42, 0.18);
  --vp-shadow-button:       0 4px 12px rgba(37, 99, 235, 0.20);

  /* Animation */
  --vp-ease-tile:           cubic-bezier(0.34, 1.56, 0.64, 1);
  --vp-ease-snappy:         cubic-bezier(0.32, 0.72, 0, 1);
  --vp-ease-smooth:         cubic-bezier(0.4, 0, 0.2, 1);
  --vp-ease-flip:           cubic-bezier(0.4, 0, 0.2, 1);

  --vp-dur-fast:            150ms;
  --vp-dur-base:            300ms;
  --vp-dur-tile:            400ms;
  --vp-dur-flip:            600ms;
}