/* ===========================================================================
   POP — Design tokens
   Mirrored 1:1 from the POP Figma library (file 2cqVQmqxLtpZ4gvcSj5KEs).
   Source of truth: "POP Design System" node 1158:25902 variable collection.
   Do not invent values here. If a value is missing, pull it from Figma first.
   =========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --orange-500: #ff6323;   /* Primary Color / Primary — fills only */
  --orange-700: #d3521f;   /* Primary border + hard shadow */
  /* Orange TEXT on a light background. #ff6323 on white is 2.97:1, which fails
     WCAG AA at any size, and it is used for every "Add"/"Choose" affordance.
     orange-700 is 4.20:1 — a big improvement using a colour already in the
     palette. Reaching 4.5 needs a darker brand tint (#c2410c = 5.18): Sam's
     call, not mine. Fills are untouched. */
  --orange-text: var(--orange-700);

  --green-50:  #e5f7ee;
  --green-500: #2aa96a;    /* Success / confirm + add */
  --green-700: #1d7448;    /* Success border + hard shadow */
  --green-800: #175436;

  --beige-50:  #fff7f1;    /* Secondary button fill */
  --beige-400: #d1b7a4;    /* Secondary button border */

  /* --- Neutrals --------------------------------------------------------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #fcfcfc;
  --neutral-200: #dfdfdf;  /* Hairlines, dividers, card borders */
  --neutral-400: #afafaf;
  --neutral-500: #747474;  /* Secondary text, placeholder values */
  --neutral-900: #2f2f2f;  /* Primary text */

  --nav-icon-border: #d8d8d8;

  /* --- Surfaces --------------------------------------------------------- */
  --surface-app:    #fffbf9;  /* Warm app canvas (intro screen bg) */
  --surface-card:   #ffffff;
  --surface-sunken: #fcfcfc;

  --danger-500: #c43c2e;
  --danger-50:  #fbecea;

  /* --- Type families ---------------------------------------------------- */
  /* Lora = headings & titles. Inter = UI, body, buttons. SF Pro = iOS chrome */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;

  /* --- Type scale (family / size / line-height / tracking) -------------- */
  --t-header-title:  600 17px/22px var(--font-display);   /* -0.43 tracking */
  --t-heading-24:    600 24px/30px var(--font-display);
  --t-lora-20:       600 20px/26px var(--font-display);

  --t-medium-15:     500 15px/20px var(--font-ui);
  --t-semibold-15:   600 15px/20px var(--font-ui);
  --t-medium-13:     500 13px/18px var(--font-ui);
  --t-regular-12:    400 12px/18px var(--font-ui);
  --t-medium-12:     500 12px/18px var(--font-ui);
  --t-btn-label:     600 17px/20px var(--font-ui);        /* Button Label Default */
  --t-btn-label-xs:  700 14px/20px var(--font-ui);

  /* --- Button tokens (Figma "Button" variable collection) --------------- */
  --btn-radius: 1000px;
  --btn-h-lg: 52px;   --btn-pad-h-lg: 24px; --btn-pad-v-lg: 10px; --btn-gap-lg: 8px;
  --btn-h-md: 44px;   --btn-pad-h-md: 16px; --btn-pad-v-md: 10px; --btn-gap-md: 8px;
  --btn-h-sm: 35px;   --btn-pad-h-sm: 12px; --btn-pad-v-sm: 10px; --btn-gap-sm: 6px;
  --btn-drop: 4px;                       /* hard bottom shadow travel */
  --btn-icon-slot: 20px;

  /* --- Radii ------------------------------------------------------------ */
  --r-card: 16px;
  --r-sheet: 30px;
  --r-device: 46px;
  --r-field: 12px;
  --r-pill: 1000px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-s: 0 2px 3px rgba(0, 0, 0, 0.06);           /* Dropshadow S */
  --shadow-nav: 0 1px 1.65px rgba(0, 0, 0, 0.07);      /* Nav Icon */
  --shadow-sheet: 0 -8px 30px rgba(47, 47, 47, 0.08);

  /* --- Layout ----------------------------------------------------------- */
  --screen-w: 393px;
  --screen-h: 852px;
  --gutter: 16px;             /* Screen side padding */
  --content-w: 361px;         /* 393 - 16 - 16 */
  --statusbar-h: 61px;        /* Figma "Status bar - iPhone" */
  --header-h: 62px;           /* Figma "Header / Type=Standard" */
  --buttonbar-h: 108px;       /* Figma "Button Bar / Layout=Single" */
  --home-indicator-h: 34px;

  /* --- Motion (iOS feel) ------------------------------------------------ */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);       /* UINavigationController */
  --ease-out-ios: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-kb: cubic-bezier(0.17, 0.59, 0.21, 1);     /* Keyboard curve */
  --dur-push: 420ms;
  --dur-sheet: 380ms;
  --dur-kb: 280ms;
  --dur-tap: 110ms;
}