/* ============================================================
   PETSONA · Design System tokens
   Shopping that knows your pet.
   ------------------------------------------------------------
   Flattened from the Petsona design system (tokens/*.css) for
   production: one file, one request. Use the var(--ps-*) tokens
   everywhere; do not hardcode values.
   Webfonts (Fredoka · Mulish · DM Mono) are loaded via <link>
   tags in each page head, not @import, for faster first paint.
   ============================================================ */

/* ---- Colour ------------------------------------------------
   Softened vermilion. Petsona Coral (#EC6A45) is the one UI
   accent. Everything else is warm ink, cream and a cosy neutral
   scale. Profile pastels theme individual pet profiles only;
   functional hues are reserved for status. */
:root {
  /* Brand · Petsona Coral (softened vermilion) */
  --ps-coral-700:  #C64A2A;  /* deep · text on tint / pressed  */
  --ps-coral-600:  #DA5735;  /* hover                          */
  --ps-coral-500:  #EC6A45;  /* PRIMARY accent · Petsona Coral */
  --ps-coral-300:  #F7A98F;  /* soft pastel · dark-theme accent */
  --ps-coral-100:  #FBD9CC;  /* pastel tint · rings, halos     */
  --ps-coral-050:  #FFF2EC;  /* surface tint (peachy cream)    */

  --ps-ink:        #2A241E;  /* primary text (warm near-black) */
  --ps-charcoal:   #211C17;  /* dark-theme surface (warm)      */
  --ps-white:      #FFFFFF;
  --ps-cream:      #FFFCF8;  /* warm paper · default page bg   */

  /* Warm neutral scale (cosy, creamy) */
  --ps-n50:   #FAF6F1;
  --ps-n100:  #F1EAE1;
  --ps-n200:  #E6DBCE;
  --ps-n300:  #D2C4B3;
  --ps-n400:  #A99986;
  --ps-n500:  #7C6F5F;
  --ps-n600:  #564C40;
  --ps-n700:  #38312A;
  --ps-n800:  #26211B;

  /* Profile pastels (per-pet personalisation) */
  /* each: a mid tone (rings / text on tint) + a soft tint (fills) */
  --ps-profile-coral:        #EC6A45;
  --ps-profile-coral-tint:   #FFF2EC;
  --ps-profile-butter:       #DFA43A;
  --ps-profile-butter-tint:  #FBF0D4;
  --ps-profile-sage:         #6C9E62;
  --ps-profile-sage-tint:    #E9F1E5;
  --ps-profile-sky:          #5690AE;
  --ps-profile-sky-tint:     #E4EFF3;
  --ps-profile-lilac:        #8E77AE;
  --ps-profile-lilac-tint:   #EEE9F4;
  --ps-profile-blush:        #CE6E86;
  --ps-profile-blush-tint:   #FBE7EC;

  /* Functional (status only, never decorative) */
  --ps-success:  #2F9E6A;
  --ps-info:     #3F86C6;
  --ps-warning:  #E68A2C;
  --ps-danger:   #D5544A;

  /* Semantic roles · LIGHT (default) */
  --ps-bg:            var(--ps-cream);
  --ps-surface:       var(--ps-n50);
  --ps-surface-2:     var(--ps-n100);
  --ps-border:        var(--ps-n200);
  --ps-text:          var(--ps-ink);
  --ps-text-muted:    var(--ps-n500);
  --ps-accent:        var(--ps-coral-500);
  --ps-accent-hover:  var(--ps-coral-600);
  --ps-accent-tint:   var(--ps-coral-050);
  --ps-on-accent:     var(--ps-white);
}

/* DARK · cosy warm-charcoal theme for footers, hero bands and
   focused moments (not a full store dark-mode). Coral lifts to
   the soft pastel so it glows gently against the warm dark. */
[data-theme="dark"], .ps-dark {
  --ps-bg:            var(--ps-charcoal);
  --ps-surface:       #2B2620;
  --ps-surface-2:     #37312A;
  --ps-border:        #40392F;
  --ps-text:          #FBF6EF;
  --ps-text-muted:    #B3A895;
  --ps-accent:        var(--ps-coral-300);
  --ps-accent-hover:  var(--ps-coral-500);
  --ps-accent-tint:   rgba(236, 106, 69, 0.16);
  --ps-on-accent:     #241D16;
}

/* ---- Typography --------------------------------------------
   Fredoka carries the warmth (headlines, wordmark). Mulish does
   the reading work in body and UI. DM Mono is the quiet
   structured register: pet specs, SKUs, order numbers. */
:root {
  --ps-font-display: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ps-font-body:    "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ps-font-mono:    "DM Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Weights */
  --ps-weight-regular: 400;
  --ps-weight-medium:  500;
  --ps-weight-semi:    600;
  --ps-weight-bold:    700;
  --ps-weight-extra:   800;  /* Mulish only · heavy UI emphasis */

  /* Type scale (1rem = 16px, ~1.25 ratio) */
  --ps-size-display-xl: 4rem;     /* 64 · hero            */
  --ps-size-display:    3rem;     /* 48                   */
  --ps-size-h1:         2.25rem;  /* 36                   */
  --ps-size-h2:         1.75rem;  /* 28                   */
  --ps-size-h3:         1.375rem; /* 22                   */
  --ps-size-body-lg:    1.125rem; /* 18                   */
  --ps-size-body:       1rem;     /* 16                   */
  --ps-size-small:      0.875rem; /* 14                   */
  --ps-size-caption:    0.75rem;  /* 12 · eyebrows/labels */

  /* Line-height */
  --ps-leading-tight: 1.1;    /* rounded display headlines */
  --ps-leading-snug:  1.3;    /* sub-heads                 */
  --ps-leading-body:  1.62;   /* paragraphs                */

  /* Letter-spacing */
  --ps-track-eyebrow: 0.14em;   /* uppercase labels       */
  --ps-track-display: -0.01em;  /* gentle tighten on big  */
  --ps-track-mono:    0.02em;   /* specs / order data     */
}

/* ---- Spacing (4px base unit) ---- */
:root {
  --ps-space-1:  0.25rem;  /* 4  */
  --ps-space-2:  0.5rem;   /* 8  */
  --ps-space-3:  0.75rem;  /* 12 */
  --ps-space-4:  1rem;     /* 16 */
  --ps-space-6:  1.5rem;   /* 24 */
  --ps-space-8:  2rem;     /* 32 */
  --ps-space-12: 3rem;     /* 48 */
  --ps-space-16: 4rem;     /* 64 */
  --ps-space-24: 6rem;     /* 96 */
}

/* ---- Radius ------------------------------------------------
   Friendliness lives in the corners. The fully-rounded pill
   (999px) is the SIGNATURE shape for buttons, badges, tags and
   pet chips. Cards use the larger radii. */
:root {
  --ps-radius-sm:   10px;
  --ps-radius-md:   16px;
  --ps-radius-lg:   24px;
  --ps-radius-xl:   28px;
  --ps-radius-full: 999px;   /* the signature pill */
}

/* ---- Elevation ---------------------------------------------
   Soft, warm-tinted, pillowy shadows (brown-warm, never cold
   grey). The coral HALO is the featured-moment device. */
:root {
  --ps-shadow-sm: 0 1px 2px rgba(74,52,38,.05), 0 1px 3px rgba(74,52,38,.05);
  --ps-shadow-md: 0 8px 24px -6px rgba(74,52,38,.11);
  --ps-shadow-lg: 0 24px 60px -14px rgba(74,52,38,.18);
  --ps-halo:      0 0 0 3px var(--ps-coral-100), 0 14px 38px -10px rgba(236,106,69,.34);
}