/* ==========================================================================
   Photorus Design System — Foundation tokens
   Ported from the Photorus iOS app (Swift/SwiftUI → CSS).
   Import this file first, then any preview card CSS on top.
   ========================================================================== */

/* ---- Web fonts: Geist (UI) + Sacramento (display accent) ----------------- */
/* Geist is the app's primary UI face; SF Pro is Apple-native so we fall back
   to system-ui on non-Apple platforms. Sacramento covers the handwritten
   "Photorus" wordmark on the regBackground splash. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Sacramento&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* =======================================================================
     COLOR — brand
     ======================================================================= */
  /* Primary indigo-violet. The hero color. Buttons, focus rings, logo fill,
     text links, active tab labels. Always paired with white text. */
  --ph-primary:            #5468FF;  /* rgb(84,104,255) — 1680× in Figma     */
  --ph-primary-hover:      #4453E8;  /* 8% darker for hover/press            */
  --ph-primary-pressed:    #3E4ACC;  /* deeper press state                   */

  /* Primary tints — lighter siblings used for hover bg, chips, skeletons,
     gradient stops, and decorative "soft" surfaces. */
  --ph-primary-300:        #7081FF;  /* 385× in Figma                        */
  --ph-primary-200:        #A2BBFF;  /* 232× — inline link text, hints       */
  --ph-primary-100:        #E6EAFF;  /* derived — soft chip bg               */
  --ph-primary-50:         #F2F4FF;  /* derived — page section bg            */

  /* Violet siblings — used sparingly for illustrations and gradient accents. */
  --ph-violet-bright:      #7570FF;  /* rgb(117,112,255) — 85× in Figma      */
  --ph-violet-deep:        #4A3AFF;  /* 53× — deeper gradient stop           */
  --ph-violet-accent:      #8A38F5;  /* 50× — used for special highlights    */

  /* Brand-dark — the tab-bar icon & navigation stroke color. Near-navy. */
  --ph-navy:               #303874;  /* rgb(48,56,116) — 132× in Figma       */
  --ph-navy-700:           #1E1B39;  /* rgb(30,27,57) — deepest text         */
  --ph-navy-900:           #101720;  /* rgb(16,23,32) — near-black body copy */

  /* =======================================================================
     COLOR — neutrals
     ======================================================================= */
  --ph-white:              #FFFFFF;
  --ph-off-white:          #F2F1F1;  /* rgb(242,241,241) — card borders      */
  --ph-gray-200:           #D9D9D9;  /* rgb(217,217,217) — dividers          */
  --ph-gray-400:           #818181;  /* rgb(129,129,129) — muted meta        */
  --ph-gray-500:           #7077A4;  /* rgb(112,119,164) — secondary text    */
  --ph-black:              #000000;

  /* =======================================================================
     COLOR — semantic
     ======================================================================= */
  --ph-success:            #34C759;  /* rgb(52,199,89) — 149× in Figma, iOS  */
  --ph-success-bg:         #EAFBEF;
  --ph-danger:             #FF0064;  /* rgb(255,0,100) — 81× in Figma        */
  --ph-danger-bg:          #FFE8EF;
  --ph-warning:            #FF8C00;  /* rgb(255,140,0) — 64× in Figma        */
  --ph-warning-bg:         #FFF3E0;

  /* =======================================================================
     COLOR — surfaces & overlays
     ======================================================================= */
  --ph-surface:            #FFFFFF;
  --ph-surface-subtle:     #F7F8FB;
  --ph-surface-sheet:      rgba(255,255,255,0.96);
  --ph-scrim:              rgba(0,0,0,0.45);       /* modal dim             */
  --ph-overlay-soft:       rgba(0,0,0,0.05);       /* 290× — hairlines      */
  --ph-overlay-hover:      rgba(84,104,255,0.08);  /* primary-tinted hover  */

  /* =======================================================================
     TYPOGRAPHY
     ======================================================================= */
  /* Geist is the workhorse. SF Pro lives only on Apple platforms but we
     list it first on display ramps so headings stay native on iOS previews.
     system-ui is the safety net on everything else. */
  --ph-font-ui:       'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ph-font-display:  -apple-system, 'SF Pro Display', 'Geist', system-ui, sans-serif;
  --ph-font-script:   'Sacramento', 'Brush Script MT', cursive;   /* wordmark */
  --ph-font-mono:     ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type scale — directly mirrors sizes that actually occur in the Figma.
     The iOS design heavily uses 14/16/22 for body+title and 32–48 for hero. */
  --ph-text-xs:     12px;   /* tab labels, micro-caption                     */
  --ph-text-sm:     14px;   /* body small, button text (default)             */
  --ph-text-base:   16px;   /* body                                          */
  --ph-text-lg:     18px;
  --ph-text-xl:     20px;   /* card titles                                   */
  --ph-text-2xl:    22px;   /* screen titles (most common h1 in Figma)       */
  --ph-text-3xl:    28px;
  --ph-text-4xl:    32px;   /* hero on splash/onboarding                     */
  --ph-text-5xl:    40px;
  --ph-text-6xl:    48px;   /* landing hero                                  */

  /* Weights — Geist ships 400/500/600/700/800. */
  --ph-weight-regular:   400;
  --ph-weight-medium:    500;
  --ph-weight-semibold:  600;
  --ph-weight-bold:      700;

  /* Line heights — tight for display, relaxed for paragraphs. */
  --ph-leading-tight:    1.15;
  --ph-leading-snug:     1.3;
  --ph-leading-normal:   1.45;
  --ph-leading-relaxed:  1.6;

  /* Letter spacing — mostly 0; slight tightening on large display. */
  --ph-tracking-tight:  -0.02em;
  --ph-tracking-normal: 0;

  /* =======================================================================
     SPACING — 4px base, tuned to the iOS inset grid
     ======================================================================= */
  --ph-space-1:   4px;
  --ph-space-2:   8px;
  --ph-space-3:   12px;
  --ph-space-4:   16px;   /* standard screen inset on iPhone                 */
  --ph-space-5:   20px;
  --ph-space-6:   24px;
  --ph-space-8:   32px;
  --ph-space-10:  40px;
  --ph-space-12:  48px;
  --ph-space-16:  64px;
  --ph-space-20:  80px;

  /* =======================================================================
     RADIUS — Photorus leans into iOS-style deep rounding
     ======================================================================= */
  --ph-radius-sm:     8px;
  --ph-radius-md:     12px;
  --ph-radius-lg:     16px;   /* default card radius                         */
  --ph-radius-xl:     20px;   /* screen-size sheets                          */
  --ph-radius-2xl:    24px;   /* primary CTA buttons                         */
  --ph-radius-3xl:    32px;
  --ph-radius-pill:   999px;  /* chips, segmented controls                   */

  /* =======================================================================
     SHADOWS — all pulled from rgba(32,35,39,0.xx) variants in the Figma
     ======================================================================= */
  --ph-shadow-xs:  0 1px 2px rgba(32,35,39,0.04);
  --ph-shadow-sm:  0 2px 4px rgba(32,35,39,0.04), 0 1px 2px rgba(32,35,39,0.02);
  --ph-shadow-md:  0 8px 16px rgba(32,35,39,0.08), 0 2px 4px rgba(32,35,39,0.04);
  --ph-shadow-lg:  0 16px 32px rgba(32,35,39,0.16), 0 4px 8px rgba(32,35,39,0.04);
  --ph-shadow-primary: 0 8px 24px rgba(84,104,255,0.35);  /* CTA lift       */

  /* =======================================================================
     MOTION — iOS default easing, short durations
     ======================================================================= */
  --ph-ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ph-ease-emphasize: cubic-bezier(0.3, 0, 0, 1.1);
  --ph-dur-fast:       120ms;
  --ph-dur-base:       200ms;
  --ph-dur-slow:       320ms;
}

/* ==========================================================================
   Base reset — preview cards inherit these sensible defaults.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ph-font-ui);
  font-size: var(--ph-text-base);
  line-height: var(--ph-leading-normal);
  color: var(--ph-navy-900);
  background: var(--ph-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Utility classes — light sugar used across the preview cards.
   These are *not* a Tailwind-style system; just the handful we repeat.
   ========================================================================== */
.ph-stack   { display: flex; flex-direction: column; }
.ph-row     { display: flex; flex-direction: row; align-items: center; }
.ph-wrap    { flex-wrap: wrap; }

/* Screen title — the 22px SF Pro Semibold you see at the top of every screen */
.ph-screen-title {
  font-family: var(--ph-font-display);
  font-size: var(--ph-text-2xl);
  font-weight: var(--ph-weight-bold);
  color: var(--ph-navy);
  letter-spacing: var(--ph-tracking-tight);
}

/* Caption / eyebrow */
.ph-eyebrow {
  font-family: var(--ph-font-ui);
  font-size: var(--ph-text-xs);
  font-weight: var(--ph-weight-semibold);
  color: var(--ph-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}