/* =============================================================
   HeySilkySkin design tokens
   -------------------------------------------------------------
   Ported from the design prototype. The prototype shipped a base
   violet palette with a blush override layered on top; that has
   been resolved here into one flat set — the blush values are the
   real brand.

   Token NAMES are kept identical to the prototype (including the
   now-misleading --color-accent-lime, which resolves to rose) so
   component CSS can be ported across without renaming.
   ============================================================= */

:root {

  /* ---- Brand & accent ------------------------------------- */
  --color-primary:            #241d1b;  /* charcoal button fill */
  --color-ink:                #2c2422;  /* warm charcoal body ink */
  --color-ink-deep:           #2c2422;
  --color-ink-press:          #1a1a1a;  /* pressed inverted button text */
  --color-accent-pink:        #ef8fb0;  /* rose — stars, badges */
  --color-accent-lime:        #ef8fb0;  /* signature highlight + nav underline (rose, not lime) */
  --color-accent-violet:      #b3607d;  /* links */
  --color-accent-violet-deep: #8a4a63;  /* link hover */
  --color-accent-violet-mid:  #79628c;  /* faint accent chips */

  /* ---- Surfaces ------------------------------------------- */
  --color-surface-canvas:         #fbe7ea;  /* page canvas — soft blush */
  --color-surface-canvas-dark:    #fbe7ea;  /* prototype alias, same value */
  --color-surface-canvas-light:   #ffffff;
  --color-surface-night:          #ffffff;  /* cards on blush */
  --color-surface-press-light:    #f0f0f0;
  --color-surface-press-stronger: #efefef;
  --color-surface-announce:       #f7dbe1;  /* announcement bar */

  /* ---- Hairlines ------------------------------------------ */
  --color-hairline-violet: #f0d9de;  /* card + section borders */
  --color-hairline-cool:   #cfcfdb;  /* text inputs */
  --color-hairline-cloud:  #e5e7eb;  /* dividers */

  /* ---- Text ----------------------------------------------- */
  --color-on-primary:    #ffffff;
  --color-on-dark-muted: rgba(44, 36, 34, 0.62);
  --color-on-dark-faint: rgba(44, 36, 34, 0.18);

  /* ---- Semantic ------------------------------------------- */
  --color-ring-focus: rgba(59, 130, 246, 0.5);  /* the only blue in the system */
  --color-success:    #2e7d5b;
  --color-error:      #b3261e;

  /* ---- Families ------------------------------------------- */
  --font-display: 'Onest', 'Rubik', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-ui:      'Rubik', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-code:    'Monaco', 'Menlo', monospace;

  /* ---- Type scale: size / weight / line-height / tracking -- */
  --type-display-hero-size: 88px;  --type-display-hero-weight: 700; --type-display-hero-lh: 1.2;  --type-display-hero-ls: 0;
  --type-display-large-size: 60px; --type-display-large-weight: 500;--type-display-large-lh: 1.1; --type-display-large-ls: 0;
  --type-heading-xl-size: 30px;    --type-heading-xl-weight: 500;   --type-heading-xl-lh: 1.2;    --type-heading-xl-ls: 0;
  --type-heading-lg-size: 27px;    --type-heading-lg-weight: 500;   --type-heading-lg-lh: 1.25;   --type-heading-lg-ls: 0;
  --type-heading-md-size: 24px;    --type-heading-md-weight: 500;   --type-heading-md-lh: 1.25;   --type-heading-md-ls: 0;
  --type-heading-sm-size: 20px;    --type-heading-sm-weight: 600;   --type-heading-sm-lh: 1.25;   --type-heading-sm-ls: 0;
  --type-body-lg-size: 16px;       --type-body-lg-weight: 400;      --type-body-lg-lh: 2.0;       --type-body-lg-ls: 0;
  --type-body-strong-size: 16px;   --type-body-strong-weight: 600;  --type-body-strong-lh: 1.5;   --type-body-strong-ls: 0;
  --type-body-md-size: 16px;       --type-body-md-weight: 500;      --type-body-md-lh: 1.5;       --type-body-md-ls: 0;
  --type-eyebrow-size: 15px;       --type-eyebrow-weight: 500;      --type-eyebrow-lh: 1.4;       --type-eyebrow-ls: 0;
  --type-button-cap-size: 14px;    --type-button-cap-weight: 700;   --type-button-cap-lh: 1.14;   --type-button-cap-ls: 0.2px;
  --type-caption-size: 14px;       --type-caption-weight: 400;      --type-caption-lh: 1.43;      --type-caption-ls: 0;
  --type-micro-cap-size: 10px;     --type-micro-cap-weight: 600;    --type-micro-cap-lh: 1.8;     --type-micro-cap-ls: 0.25px;

  /* ---- Spacing (8px base) --------------------------------- */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-section: 96px;

  /* ---- Radii ---------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-xxl:  18px;
  --radius-full: 9999px;

  /* ---- Elevation ------------------------------------------ */
  --elevation-1: rgba(0,0,0,0.08) 0 2px 8px 0;
  --elevation-2: rgba(0,0,0,0.1) 0 10px 15px -3px, rgba(0,0,0,0.1) 0 4px 6px -4px;
  --elevation-3: rgba(44,36,34,0.10) 0 0 8px 6px;
  --elevation-4: rgba(0,0,0,0.18) 0 0.5rem 1.5rem;
  --shadow-input-focus: rgba(0,0,0,0.15) 0 2px 10px inset;

  /* ---- Layout --------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 24px;
  --header-height: 66px;

  /* ---- Motion --------------------------------------------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur-mid:  200ms;
  --dur-slow: 600ms;
}

/* Section rhythm collapses on mobile — the prototype's 96px band is
   far too much air on a phone. */
@media (max-width: 960px) {
  :root { --space-section: 56px; }
}
@media (max-width: 680px) {
  :root { --space-section: 40px; --container-pad: 18px; }
}