/* Amora design tokens for the version 2 web funnel.
 *
 * Copied from the design handoff's token files, which were themselves lifted
 * from ios/Shared/Extensions/Color+Amora.swift,
 * ios/Core/DesignSystem/OnboardingColors.swift and
 * ios/Core/DesignSystem/OnboardingTypography.swift. Copied rather than
 * re-derived on purpose: these are the app's real values, and a funnel that
 * re-picks them by eye is how the web and the app drift apart.
 *
 * Do not edit a value here to fix one screen. Fix the screen, or change the
 * token in the app first and copy it here again.
 *
 * The two @font-face faces are omitted: web/assets/funnel/funnel.css already
 * declares them against the same files in /assets/fonts/.
 */
/* Amora color system. Values lifted verbatim from
   ios/Shared/Extensions/Color+Amora.swift, ios/Core/DesignSystem/OnboardingColors.swift
   Light mode is warm off-white with pastel cards on solid white; dark mode is
   lifted charcoal with saturated accents. */
:root{
  /* Brand */
  --amora-pink:#E91E63;
  --amora-pink-soft:#FF6B9D; /* CTA glow + light-mode accents */
  --amora-pink-pressed:#C4144D;

  /* Light mode surfaces + ink */
  --bg-base:#FBF9F7;
  --bg-raised:#FDFBF9;
  --surface-card:#FFFFFF;
  --surface-elevated:#FFFFFF;
  --surface-pressed:rgba(233,30,99,.06);
  --tabbar-bg:#FFFFFF;
  --tabbar-border:rgba(0,0,0,.06);
  --stroke-subtle:rgba(0,0,0,.06);
  --stroke-strong:rgba(0,0,0,.10);
  --divider:rgba(0,0,0,.04);
  --text-primary:#241B22;
  --text-secondary:#4B3F46;
  --text-tertiary:#7A6D74;
  --text-disabled:rgba(36,27,34,.38);
  --icon-default:#6B6B6F;
  --icon-muted:#8E8E93;
  --button-bg:#FFFFFF;
  --button-text:#241B22;
  --pill-bg:#FFFFFF;
  --pill-border:rgba(0,0,0,.08);
  --avatar-bg:#FFFFFF;
  --avatar-placeholder-bg:#FFE4EC;
  --connector-line:rgba(0,0,0,.12);
  --brand-fill:rgba(233,30,99,.10);
  --brand-border:rgba(233,30,99,.20);

  /* Semantic accents */
  --success:#34C759;
  --gold:#F9A825;
  --info:#4AA3DF;
  --warning:#E6B566;
  --error:#EF4444;
  --story-ring:#4AE88F;

  /* Pastel decoratives */
  --pastel-pink:#FFE4EC;
  --pastel-blue:#E3F2FD;
  --pastel-green:#E8F5E9;

  /* 12-color question/topic card palette (light) + matched accents */
  --card-1-bg:#C4E4F7; --card-1-ink:#4A9EC4; /* baby blue, winter */
  --card-2-bg:#DED0F0; --card-2-ink:#9B6DB0; /* lavender, starters */
  --card-3-bg:#FACDD4; --card-3-ink:#E0728C; /* blush, relationship */
  --card-4-bg:#FACBC4; --card-4-ink:#E08878; /* peach, sex and love */
  --card-5-bg:#F8E5C8; --card-5-ink:#D4A864; /* warm cream, values */
  --card-6-bg:#C4F0D4; --card-6-ink:#5BB078; /* mint, money */
  --card-7-bg:#D0F0E0; --card-7-ink:#6BA088; /* sage */
  --card-8-bg:#DED0F2; --card-8-ink:#8B7EB5; /* soft purple */
  --card-9-bg:#F0E0C4; --card-9-ink:#C4A060; /* sand */
  --card-10-bg:#F2C8D8; --card-10-ink:#C07890; /* rose */
  --card-11-bg:#C4DEF2; --card-11-ink:#6090B0; /* powder blue */
  --card-12-bg:#F2D4C4; --card-12-ink:#C09070; /* apricot */

  /* Quiz category colors */
  --category-amber:#F57F17;
  --category-orange:#FF7043;
  --category-pink:#E91E63;
  --category-purple:#9C27B0;
  --category-teal:#00897B;

  /* App background glows (light) */
  --glow-pink:rgba(255,182,193,.56);
  --glow-pink-2:rgba(255,192,203,.32);
  --glow-orange:rgba(255,165,0,.19);
  --glow-peach:rgba(255,218,185,.16);

  /* Campaign / App Store ground: a photographed blue sky, light at the horizon.
     Grain is always on top at 3-5%. */
  --sky-top:#8FB6DC;
  --sky-mid:#A8C8E6;
  --sky-low:#C9DCEC;
  --sky-horizon:#E7EEF3;
  --campaign-ink:#FFFFFF;

  /* Shadows use black in light mode; rose-tinted shadows were removed */
  --shadow-ink:rgba(0,0,0,.12);
  --shadow-ink-strong:rgba(0,0,0,.15);
}

[data-theme="dark"]{
  --bg-base:#161B20;
  --bg-raised:#12181C;
  --surface-card:#242C34;
  --surface-elevated:#202830;
  --surface-pressed:#202830;
  --tabbar-bg:#12181C;
  --tabbar-border:rgba(42,52,59,.22);
  --stroke-subtle:rgba(42,50,58,.42);
  --stroke-strong:rgba(42,50,58,.52);
  --divider:rgba(42,50,58,.26);
  --text-primary:#E6EBEF;
  --text-secondary:#A9B1BA;
  --text-tertiary:#7E8892;
  --text-disabled:#59636D;
  --icon-default:#A9B1BA;
  --icon-muted:#7E8892;
  --button-bg:#232A31;
  --button-text:#E6EBEF;
  --pill-bg:#232A31;
  --pill-border:rgba(42,50,58,.55);
  --avatar-bg:#232A31;
  --avatar-placeholder-bg:#36414A;
  --connector-line:#3A424A;
  --brand-fill:rgba(233,30,99,.14);
  --brand-border:rgba(233,30,99,.28);

  --success:#3EDB7C;
  --gold:#FFD54F;
  --error:#E0645C;
  --story-ring:#3EDB7C;

  /* 12-color card palette (dark), deep saturated grounds */
  --card-1-bg:#3B1F26; --card-2-bg:#40241E; --card-3-bg:#4A341A;
  --card-4-bg:#3E3A1F; --card-5-bg:#243A2F; --card-6-bg:#1F3A3A;
  --card-7-bg:#1E343F; --card-8-bg:#1F2F46; --card-9-bg:#24224A;
  --card-10-bg:#2E2342; --card-11-bg:#3A2438; --card-12-bg:#3C1E2A;

  --shadow-ink:rgba(0,0,0,.4);
  --shadow-ink-strong:rgba(0,0,0,.5);
}

/* Type system. Native iOS renders SF Pro Rounded (system font, design: .rounded);
   the shipped webfont equivalent is Open Runde, exposed here as "Amora Rounded".
   Sizes/weights lifted from ios/Core/DesignSystem/OnboardingTypography.swift and
   ios/Shared/Extensions/Font+Amora.swift. They are exact, not rounded. */
:root{
  --font-rounded:"Amora Rounded",ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Campaign display face: App Store screenshots, store art, hero moments.
     Never used inside the app UI. */
  --font-display:"Fraunces",Georgia,serif;
  --display-variation:"SOFT" 100,"WONK" 1,"opsz" 144; /* @kind other */
  --display-weight:600;
  --display-lh:.95; /* @kind other */
  --display-tracking:-.015em;

  /* Onboarding / display titles */
  --text-title:32px;          --text-title-lh:38px;
  --text-title-sm:28px;
  --text-invite-title:26px;
  --text-section-header:24px;
  --text-features-header:22px;
  --text-card-title:18px;

  /* Body */
  --text-subtitle:16px;       --text-subtitle-lh:22px;
  --text-subtitle-sm:14px;
  --text-subtitle-xs:13px;
  --text-card-body:16px;      --text-body-lh:20px;
  --text-feature:15px;
  --text-question:15.5px;     --text-question-lh:21px;

  /* Chrome */
  --text-screen-title:18px;   /* weight 700 */
  --text-amora-section:18px;  /* weight 800 */
  --text-topic-title:13px;    /* weight 800 */
  --text-cta:12px;            /* weight 800, uppercase */
  --text-status:12px;
  --text-streak:12.5px;
  --text-caption:13px;
  --text-footer:12px;
  --text-badge:11px;          /* weight 700, uppercase */
  --text-category:11px;       /* weight 800, uppercase, tracking .3 */
  --text-tiny:10px;

  /* Weights. RN 800 maps to SwiftUI .heavy */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:800;
  --weight-black:900;

  /* Tracking */
  --tracking-category:.3px;
  --tracking-section-pill:.5px;
  --tracking-invite-code:2px;
}

/* Corner radii. Every value appears in the Swift source. iOS 26 continuous
   corners are approximated in CSS with plain border-radius. */
:root{
  --radius-icon-s:10px;   /* topic card icon tile */
  --radius-icon:12px;     /* feature card icon tile */
  --radius-pill-rect:14px;/* story caption pill */
  --radius-control:16px;  /* buttons (.regular), inputs, text fields */
  --radius-card-s:16px;   /* gradient / question cards */
  --radius-tile:20px;     /* category card, glass modifier default */
  --radius-card:24px;     /* CardContainer, glass cards */
  --radius-cta:25px;      /* large CTA + secondary button */
  --radius-cta-card:26px; /* web CTA card */
  --radius-full:999px;    /* capsules, pills, nav buttons */
}

/* Spacing: AmoraSpacing.swift (app scale) plus OnboardingSpacing.swift (onboarding).
   Exact point values; do not snap to a 4/8 grid. */
:root{
  --space-xs:4px;
  --space-s:8px;
  --space-m:12px;
  --space-l:16px;
  --space-xl:24px;
  --space-xxl:32px;
  --space-section-break:40px; /* the break between one KIND of thing and the next */

  /* Screen padding */
  --screen-h:20px;            /* Home, Questions */
  --content-h:16px;           /* scroll areas, topic detail */
  --onboarding-h:24px;        /* every onboarding screen */
  --ipad-screen-h:40px;
  --ipad-max-content:700px;

  /* Cards */
  --card-pad-s:14px;
  --card-pad-m:16px;
  --card-pad-l:18px;
  --card-pad-xl:24px;
  --card-gap-s:10px;
  --card-gap-m:14px;
  --card-gap-l:20px;
  --filter-chips-to-content:16px;
  --between-topic-cards:12px;
  --question-card-pad-h:22px;
  --question-card-pad-v:18px;
  --topic-row-min-h:88px;

  /* Buttons + inputs */
  --button-pad-v-s:14px;
  --button-pad-v-l:18px;
  --button-pad-h:16px;
  --button-stack-gap:12px;
  --input-pad-v:12px;
  --input-pad-h:16px;
  --input-height:48px;
  --input-stack-gap:12px;

  /* Pills */
  --pill-pad-h-s:8px;
  --pill-pad-h-m:12px;
  --pill-pad-h-l:14px;
  --pill-pad-v:4px;
  --pill-pad-v-m:6px;
  --pill-pad-v-l:8px;
  --chip-pad-h:14px;
  --chip-pad-v:8px;
  --chip-gap:8px;

  /* Home rhythm */
  --home-top:18px;
  --hero-to-invite:14px;
  --invite-to-title:24px;
  --title-to-card:14px;
  --card-to-next-title:32px;
  --between-cards:14px;

  /* Avatars + status */
  --avatar-gap:40px;
  --story-ring-gap:3px;
  --status-bubble-pad-h:12px;
  --status-bubble-pad-v:6px;
  --photo-circle:176px;

  /* Tap target */
  --tap-min:44px;
}

/* Elevation + glass. Light mode uses BLACK shadows for visibility (rose-tinted
   shadows were deliberately removed); dark mode leans on borders and glass.
   Mapped from CardContainer.swift, PrimaryButton.swift, SectionPill.swift,
   LiquidGlassModifier.swift, AmoraNavButton.swift. */
:root{
  /* CardContainer styles: subtle / standard / elevated */
  --shadow-subtle:0 2px 8px rgba(0,0,0,.12);
  --shadow-card:0 4px 12px rgba(0,0,0,.12);
  --shadow-elevated:0 6px 16px rgba(0,0,0,.12);

  /* Small chrome */
  --shadow-pill:0 2px 4px rgba(0,0,0,.08);
  --shadow-input:0 2px 4px rgba(0,0,0,.06);
  --shadow-nav-button:0 2px 4px rgba(0,0,0,.06);
  --shadow-nav-button-media:0 3px 8px rgba(0,0,0,.25);

  /* Pink CTA glow. PrimaryButton, light mode: radius 12-14, y 6-7, pink 16% */
  --shadow-cta:0 6px 12px rgba(255,107,157,.16);
  --shadow-cta-pill:0 7px 14px rgba(255,107,157,.16);

  /* Liquid glass */
  --glass-blur:blur(20px) saturate(150%); /* @kind other */
  --glass-blur-heavy:blur(26px) saturate(160%); /* @kind other */
  --glass-fill:rgba(255,255,255,.72);
  --glass-tint:rgba(0,0,0,.03);
  --glass-stroke:rgba(255,255,255,.8);
  --glass-stroke-2:rgba(232,208,216,.3);
  --glass-highlight:rgba(255,255,255,.5);

  /* Motion. SwiftUI .spring(response:.3, dampingFraction:.7); the entry curve
     is the ease-out-expo used for rising content */
  --ease-spring:cubic-bezier(.34,1.26,.64,1); /* @kind other */
  --ease-entry:cubic-bezier(.16,1,.3,1); /* @kind other */
  --dur-press:.15s; /* @kind other */
  --dur-hover:.2s; /* @kind other */
  --dur-entry:.9s; /* @kind other */
  --press-scale:.98; /* @kind other */
}

[data-theme="dark"]{
  --shadow-subtle:0 6px 16px rgba(0,0,0,.4);
  --shadow-card:0 10px 20px rgba(0,0,0,.4);
  --shadow-elevated:0 10px 20px rgba(0,0,0,.4);
  --shadow-cta:0 4px 8px rgba(255,107,157,.18);
  --shadow-cta-pill:0 5px 10px rgba(255,107,157,.18);
  --glass-fill:rgba(30,34,40,.7);
  --glass-tint:rgba(255,255,255,.06);
  --glass-stroke:rgba(255,255,255,.3);
  --glass-stroke-2:rgba(255,255,255,.1);
  --glass-highlight:rgba(255,255,255,.06);
}