/* ============================================================
   Kin — Design Tokens
   ------------------------------------------------------------
   Single source of truth for the design system. These CSS custom
   properties are the code counterpart of Figma Variables:

     Figma Variable collection  ->  CSS custom property group below
       Color / bg               ->  --color-bg
       Radius / md              ->  --radius-md
       Spacing / 4              ->  --space-4

   When the designer exports variables from Figma, update the values
   here (names should match 1:1). Components reference only these
   tokens — never hard-coded values — so a re-theme touches this file
   alone.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --color-bg:            #efe6df;  /* flat fallback behind the hero photo */
  --color-surface:       #fbf8f4;  /* cards, raised panels */
  --color-surface-sunken:transparent; /* inset fields (float on the card via shadow only) */
  --color-surface-pill:  rgba(255, 255, 255, 0.6); /* active segmented pill */
  --color-text:          #24222c;
  --color-muted:         #6f6a7d;
  --color-muted-strong:  #494949;  /* tagline under the logo */
  --color-border:        #f3f3f3;

  --color-accent:        #c15cdb;
  --color-accent-hover:  #a83fc4;
  --color-on-accent:     #24222c;  /* text/icons on accent fills (glass pills stay light, so text stays dark) */

  --color-error:         #e0435f;
  --color-success:       #29a866;

  /* Brand gradient (accents) */
  --gradient-brand: linear-gradient(135deg, var(--color-accent), #e6a6f2);

  /* Frosted-glass sheen used on pills (segmented active state, submit button).
     Toned down from the raw Figma export — full-strength white reads as a
     glossy plastic highlight once it's on a flat cream surface instead of a
     blurred photo, so every stop here is roughly half the source opacity. */
  --gradient-glass:
    linear-gradient(270deg, rgba(255, 255, 255, 0.35) 4.8556%, rgba(255, 255, 255, 0) 17.515%),
    linear-gradient(270deg, rgba(255, 255, 255, 0) 90.115%, rgba(255, 255, 255, 0.25) 101.92%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 44.418%, rgba(255, 255, 255, 0.05) 115.25%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 26.411%, rgba(255, 255, 255, 0) 44.418%),
    linear-gradient(90deg, rgba(242, 238, 231, 0.4) 0%, rgba(242, 238, 231, 0.4) 100%);

  /* Page background: soft gradient fallback for pages without the hero photo */
  --gradient-page-bg: linear-gradient(160deg, #f4e9df 0%, #ede2e4 45%, #e9e6ec 100%);

  /* ---- Shadow ---- */
  --shadow-card:            0px 20px 45px rgba(43, 26, 46, 0.16);
  --shadow-pill:             0px 4px 22px rgba(0, 0, 0, 0.12);
  --shadow-accent-glow:      0px 0px 22px 4px rgba(193, 92, 219, 0.2);
  --shadow-inset-highlight:  inset 0.7px 0.7px 0.5px rgba(255, 255, 255, 0.25);

  /* ---- Typography ---- */
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  32px;

  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;

  /* ---- Spacing (4px scale) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;

  /* ---- Radius ---- */
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 32px; /* card corners */

  /* ---- Layout ---- */
  --container-narrow: 420px;  /* form/card column */
  --container-prose: 720px;   /* long-form text (privacy policy) */

  /* ---- Motion ---- */
  --transition-fast: 0.15s ease;
  --transition-press: 0.05s ease;

  /* Timing scale from the Figma motion-principles board (Motion / Timing) */
  --duration-instant:   120ms;
  --duration-quick:     220ms;
  --duration-standard:  450ms;
  --duration-hero:      800ms;

  /* "Physical weight" — objects accelerate gently, settle naturally,
     never snap into place. */
  --ease-emergence: cubic-bezier(0.16, 1, 0.3, 1);   /* material emergence: condense, never snap */
  --ease-drop:      cubic-bezier(0.22, 1, 0.36, 1);  /* drop: gentle decelerate into a soft landing */
}