/* =====================================================================
   NeoPet design tokens (01)

   All design values live here as CSS custom properties. No selectors,
   no component rules — only the values every other CSS file consumes.

   Naming:
     --np-color-*   — raw brand and neutral palette
     --np-surface-* — semantic surfaces (page background, card, etc.)
     --np-text-*    — text intent (strong, default, muted, inverse)
     --np-state-*   — semantic state (success, warning, danger, info)
     --np-space-*   — 8pt spacing scale
     --np-radius-*  — corner radii
     --np-shadow-*  — elevation
     --np-font-*    — font families
     --np-text-*    — type ramp sizes/leading
     --np-bp-*      — breakpoints (informational; media queries hardcode them)
     --np-motion-*  — easing + duration
     --np-z-*       — z-index scale
     --np-touch-min — minimum touch target

   Legacy `--neopet-*` and nest bridge vars (--color-brand etc.) are
   re-emitted at the bottom so older selectors keep working until
   they're migrated.
   ===================================================================== */

:root {

    /* ---- Brand palette --------------------------------------------- */
    --np-color-orange:           #F58322;
    --np-color-orange-strong:    #DC6D13;
    --np-color-orange-rgb:       245, 131, 34;
    --np-color-orange-tint:      #FFE8D2;
    --np-color-orange-tint-2:    #FDE3C5;

    --np-color-navy:             #0A214F;
    --np-color-navy-strong:      #061535;
    --np-color-navy-tint:        #E8ECF5;

    --np-color-green:            #2D553A;
    --np-color-green-tint:       #DDEDE2;

    --np-color-gold:             #FCB550;
    --np-color-gold-tint:        #FFF1D4;

    /* Playful accent palette — used for cat/dog promo, category cards,
       badges, and tints. Keep saturated values for badges; tints for
       large surfaces. */
    --np-color-mint:             #5CA98E;
    --np-color-mint-tint:        #DCEFE6;
    --np-color-sky:              #5F9EBD;
    --np-color-sky-tint:         #DCEAF1;
    --np-color-blush:            #E89A8B;
    --np-color-blush-tint:       #FBE0D8;

    /* ---- Neutral ramp ---------------------------------------------- */
    --np-color-white:            #FFFFFF;
    --np-color-cream-100:        #FFFAF2;
    --np-color-cream-200:        #F7F1E3;
    --np-color-cream-300:        #FFF4CC;
    --np-color-gray-50:          #FAFAFA;
    --np-color-gray-100:         #F2F1EE;
    --np-color-gray-200:         #E8D9C3;
    --np-color-gray-300:         #D7C4A8;
    --np-color-gray-400:         #B6A993;
    --np-color-gray-500:         #767676;
    --np-color-gray-600:         #5A5A5A;
    --np-color-gray-700:         #3D3D3D;
    --np-color-gray-800:         #262626;
    --np-color-gray-900:         #111111;

    /* ---- Surfaces -------------------------------------------------- */
    --np-surface-page:           var(--np-color-cream-200);
    --np-surface-page-alt:       var(--np-color-cream-300);
    --np-surface-shell:          var(--np-color-cream-100);
    --np-surface-card:           var(--np-color-white);
    --np-surface-card-alt:       var(--np-color-gray-50);
    --np-surface-inverse:        var(--np-color-navy);

    /* ---- Text ------------------------------------------------------ */
    --np-text-strong:            var(--np-color-navy);
    --np-text-default:           var(--np-color-gray-700);
    --np-text-muted:             var(--np-color-gray-500);
    --np-text-soft:              var(--np-color-gray-400);
    --np-text-inverse:           var(--np-color-white);
    --np-text-brand:             var(--np-color-orange);
    --np-text-link:              var(--np-color-orange);
    --np-text-link-hover:        var(--np-color-orange-strong);

    /* ---- Borders --------------------------------------------------- */
    --np-border-soft:            var(--np-color-gray-200);
    --np-border-default:         var(--np-color-gray-300);
    --np-border-strong:          var(--np-color-gray-400);
    --np-border-focus:           var(--np-color-orange);

    /* ---- Semantic states ------------------------------------------ */
    --np-state-success:          #2D553A;
    --np-state-success-tint:     #E7F1E8;
    --np-state-warning:          #D98A2B;
    --np-state-warning-tint:     #FFF2DF;
    --np-state-danger:           #C84B31;
    --np-state-danger-tint:      #FCE6E2;
    --np-state-info:             var(--np-color-navy);
    --np-state-info-tint:        var(--np-color-navy-tint);

    /* ---- Spacing — 8pt grid ---------------------------------------- */
    --np-space-3xs:              2px;
    --np-space-2xs:              4px;
    --np-space-xs:               8px;
    --np-space-sm:               12px;
    --np-space-md:               16px;
    --np-space-lg:               24px;
    --np-space-xl:               32px;
    --np-space-2xl:              48px;
    --np-space-3xl:              64px;
    --np-space-4xl:              96px;

    /* ---- Radii ----------------------------------------------------- */
    /* Softer/rounder system. Every primitive component (cards, inputs,
       dropdowns, modals, nav chips) inherits these via brand-extensions.
       Primary actions use `--np-radius-pill` (9999px) per the brand
       contract; secondary controls stay rounded-rectangle for visual
       consistency without competing with the CTA. */
    --np-radius-none:            0;
    --np-radius-xs:              8px;
    --np-radius-sm:              14px;
    --np-radius-md:              18px;
    --np-radius-lg:              22px;
    --np-radius-xl:              28px;
    --np-radius-2xl:             36px;
    --np-radius-pill:            9999px;
    --np-radius-circle:          50%;

    /* ---- Shadows --------------------------------------------------- */
    --np-shadow-xs:              0 1px 2px rgba(10, 33, 79, 0.06);
    --np-shadow-sm:              0 4px 10px rgba(10, 33, 79, 0.06);
    --np-shadow-md:              0 8px 24px rgba(10, 33, 79, 0.08);
    --np-shadow-lg:              0 16px 40px rgba(10, 33, 79, 0.14);
    --np-shadow-cta:             0 12px 24px rgba(245, 131, 34, 0.35);
    --np-shadow-focus:           0 0 0 3px rgba(245, 131, 34, 0.30);

    /* ---- Typography ----------------------------------------------- */
    --np-font-display:           Sora, "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --np-font-body:              "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --np-text-display-size:      clamp(36px, 5vw, 60px);
    --np-text-display-lh:        1.05;
    --np-text-h1-size:           clamp(28px, 3.4vw, 44px);
    --np-text-h1-lh:             1.10;
    --np-text-h2-size:           clamp(22px, 2.4vw, 32px);
    --np-text-h2-lh:             1.20;
    --np-text-h3-size:           20px;
    --np-text-h3-lh:             1.30;
    --np-text-h4-size:           17px;
    --np-text-h4-lh:             1.40;
    --np-text-body-lg-size:      17px;
    --np-text-body-lg-lh:        1.55;
    --np-text-body-size:         15px;
    --np-text-body-lh:           1.55;
    --np-text-body-sm-size:      13px;
    --np-text-body-sm-lh:        1.50;
    --np-text-micro-size:        12px;
    --np-text-micro-lh:          1.35;

    --np-text-weight-regular:    400;
    --np-text-weight-medium:     500;
    --np-text-weight-semibold:   600;
    --np-text-weight-bold:       700;
    --np-text-weight-display:    900;

    --np-tracking-tight:         -0.01em;
    --np-tracking-normal:        0;
    --np-tracking-wide:          0.04em;
    --np-tracking-eyebrow:       0.08em;

    /* ---- Breakpoints (informational; @media queries restate them) - */
    --np-bp-sm:                  640px;
    --np-bp-md:                  768px;
    --np-bp-lg:                  1024px;
    --np-bp-xl:                  1280px;

    /* ---- Container ------------------------------------------------- */
    --np-container-max:          1280px;
    --np-container-gutter:       var(--np-space-md);

    /* ---- Motion ---------------------------------------------------- */
    --np-ease-out:               cubic-bezier(.2, .9, .2, 1);
    --np-ease-in-out:            cubic-bezier(.4, 0, .2, 1);
    --np-ease-spring:            cubic-bezier(.34, 1.56, .64, 1);
    --np-duration-instant:       120ms;
    --np-duration-snap:          180ms;
    --np-duration-gentle:        240ms;
    --np-duration-entry:         360ms;

    /* ---- Z-index --------------------------------------------------- */
    --np-z-below:                -1;
    --np-z-surface:              1;
    --np-z-elevated:             10;
    --np-z-sticky:               20;
    --np-z-header:               30;
    --np-z-dropdown:             40;
    --np-z-overlay:              50;
    --np-z-modal:                60;
    --np-z-toast:                70;
    --np-z-tooltip:              80;

    /* ---- Density / touch target ---------------------------------- */
    --np-touch-min:              44px;
    --np-control-h-sm:           36px;
    --np-control-h-md:           44px;
    --np-control-h-lg:           52px;
}

/* =====================================================================
   Legacy alias layer
   Older selectors (and nest's bridge vars) still reference these names.
   Aliasing them to the new tokens lets us migrate gradually without
   breaking the rest of the storefront on the way.
   ===================================================================== */
:root {
    /* Legacy --neopet-* names */
    --neopet-brand-orange:           var(--np-color-orange);
    --neopet-brand-orange-rgb:       var(--np-color-orange-rgb);
    --neopet-brand-orange-dark:      var(--np-color-orange-strong);
    --neopet-brand-navy:             var(--np-color-navy);
    --neopet-brand-green:            var(--np-color-green);
    --neopet-brand-logo-gold:        var(--np-color-gold);

    --neopet-surface-page:           var(--np-surface-page);
    --neopet-surface-page-alt:       var(--np-surface-page-alt);
    --neopet-surface-card:           var(--np-surface-card);
    --neopet-surface-card-alt:       var(--np-surface-card-alt);
    --neopet-surface-shell:          var(--np-surface-shell);

    --neopet-text-strong:            var(--np-text-strong);
    --neopet-text-default:           var(--np-text-default);
    --neopet-text-muted:             var(--np-text-muted);
    --neopet-text-soft:              var(--np-text-soft);
    --neopet-text-inverse:           var(--np-text-inverse);

    --neopet-border-soft:            var(--np-border-soft);
    --neopet-border-default:         var(--np-border-default);
    --neopet-border-focus:           var(--np-border-focus);

    --neopet-state-success:          var(--np-state-success);
    --neopet-state-warning:          var(--np-state-warning);
    --neopet-state-danger:           var(--np-state-danger);
    --neopet-state-info:             var(--np-state-info);

    --neopet-font-display:           var(--np-font-display);
    --neopet-font-body:              var(--np-font-body);

    --neopet-radius-sm:              var(--np-radius-sm);
    --neopet-radius-md:              var(--np-radius-md);
    --neopet-radius-lg:              var(--np-radius-lg);
    --neopet-radius-pill:            var(--np-radius-pill);

    --neopet-shadow-card:            var(--np-shadow-md);
    --neopet-shadow-popover:         var(--np-shadow-lg);
    --neopet-shadow-focus-ring:      var(--np-shadow-focus);

    /* Nest bridge — points nest's own --color-brand at our orange */
    --color-brand:                   var(--np-color-orange);
    --color-brand-dark:              var(--np-color-orange-strong);
    --color-brand-rgb:               var(--np-color-orange-rgb);
    --color-brand-2:                 var(--np-color-gold);
    --primary-color:                 var(--np-color-orange);
    --color-heading:                 var(--np-text-strong);
    --color-text:                    var(--np-text-default);
    --color-body:                    var(--np-text-default);
    --color-muted:                   var(--np-text-muted);
}