/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS — Nunca Buyer (Mobile App)
   Source: curl http://localhost:3000 + tailwind.config.js + globals.css
   Updated: 2026-04-20
   ══════════════════════════════════════════════════════════

   Naming convention mirrors preview-main/design-tokens.css.
   Buyer-specific additions prefixed with --b- or noted.
   ══════════════════════════════════════════════════════════ */

:root {

  /* ══ COLOR: CORE ══ */
  --canvas:          #FFFFFF;
  --surface:         #F9FAFB;       /* bg-gray-50 — page bg */
  --heading:         #111827;       /* gray-900 */
  --body:            #4B5563;       /* gray-600 */
  --muted:           #6B7280;       /* gray-500 */
  --subtle:          #9CA3AF;       /* gray-400 */
  --faint:           #D1D5DB;       /* gray-300 */
  --placeholder:     #9CA3AF;       /* input placeholder */

  --border:          #E5E7EB;       /* gray-200 — card / input border */
  --border-s:        #F3F4F6;       /* gray-100 — divider, header bottom */


  /* ══ COLOR: BRAND (nunca green) ══ */
  --nunca:           #16a34a;       /* tailwind: nunca / text-nunca */
  --nunca-h:         #15803d;       /* hover / dark */
  --nunca-l:         #22c55e;       /* light / gradient end */
  --nunca-bg:        #f0fdf4;       /* green-50 — tinted surfaces */
  --nunca-bg-s:      #dcfce7;       /* green-100 */

  /* Hero gradient (homepage banner) */
  --hero-grad:       linear-gradient(145deg, #22c55e 0%, #16a34a 50%, #15803d 100%);


  /* ══ COLOR: SEMANTIC ══ */
  --success:         #22C55E;
  --success-s:       #F0FDF4;
  --success-on:      #15803d;

  --warning:         #F59E0B;
  --warning-s:       #FEFCE8;
  --warning-on:      #A16207;

  --danger:          #EF4444;
  --danger-s:        #FEF2F2;
  --danger-on:       #DC2626;
  --danger-b:        #FEE2E2;

  --info:            #3B82F6;
  --info-s:          #EFF6FF;
  --info-on:         #1D4ED8;

  /* Sold / unavailable state */
  --sold-bg:         rgba(31,41,55,0.75);   /* bg-gray-800/75 */
  --sold-text:       #FFFFFF;

  /* Overlay (bottom sheets / modals) */
  --overlay:         rgba(17,24,39,0.40);   /* bg-gray-900/40 */


  /* ══ TYPOGRAPHY ══ */
  --font:            'Outfit', 'Noto Sans KR', sans-serif;

  /* Scale extracted from actual class usage in HTML */
  --f-logo:          18px;          /* text-lg — header logo */
  --f-logo-w:        600;

  --f-h1:            21px;          /* homepage hero headline */
  --f-h1-w:          600;

  --f-title:         20px;          /* categories page h1 */
  --f-title-w:       600;

  --f-product-name:  22px;          /* product detail h1 */
  --f-product-price: 24px;          /* product price */

  --f-card-name:     11px;          /* 2-col grid card model name */
  --f-card-price:    13px;

  --f-body:          13px;          /* standard body text */
  --f-body-w:        400;

  --f-small:         12px;          /* form labels, descriptions */
  --f-xs:            11px;          /* most secondary labels */
  --f-xxs:           10px;          /* badges, stat labels */
  --f-micro:         9px;           /* nav tab labels */

  --f-btn:           14px;          /* primary CTA button */
  --f-btn-w:         700;

  --f-input:         13px;          /* form inputs */

  --f-nav:           9px;           /* bottom tab labels */
  --f-nav-w:         500;           /* inactive */
  --f-nav-w-active:  600;           /* active tab */


  /* ══ SPACING (8px grid) ══ */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;

  /* Component-specific padding */
  --p-header:        10px 12px;     /* px-3 py-2.5 */
  --p-page:          0 12px;        /* px-3 */
  --p-card:          10px;          /* p-2.5 */
  --p-card-detail:   16px;          /* px-4 */
  --p-section:       12px;          /* p-3 */
  --p-input:         12px 14px;     /* px-3.5 py-3 */
  --p-btn-primary:   14px 20px;     /* py-3.5 / px-5 */
  --p-btn-sm:        6px 10px;      /* px-2.5 py-1.5 */
  --p-nav:           8px 8px 10px;  /* pt-2 pb-2.5 px-2 */

  --gap-grid:        10px;          /* gap-2.5 — 2-col product grid */
  --gap-inline:      8px;           /* gap-2 */


  /* ══ BORDER RADIUS ══ */
  --r-sm:            6px;           /* rounded-md */
  --r-md:            8px;           /* rounded-lg */
  --r-lg:            12px;          /* rounded-xl — inputs, buttons */
  --r-xl:            16px;          /* rounded-2xl — cards */
  --r-full:          9999px;        /* rounded-full — pills, nav badges */

  /* Specific usage */
  --r-input:         var(--r-lg);   /* rounded-xl */
  --r-btn:           var(--r-full); /* rounded-full */
  --r-card:          var(--r-xl);   /* rounded-2xl */
  --r-hero:          var(--r-xl);   /* rounded-2xl */
  --r-thumb:         var(--r-lg);   /* photo thumbnails */
  --r-badge:         var(--r-full);
  --r-menu-icon:     var(--r-lg);   /* w-9 h-9 account menu icons */


  /* ══ ELEVATION ══ */
  --shadow-card:     0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-card-h:   0 4px 12px 0 rgba(0,0,0,0.08);
  --shadow-btn:      0 1px 3px 0 rgba(22,163,74,0.20);
  --shadow-bottom-sheet: 0 -4px 24px 0 rgba(0,0,0,0.08);


  /* ══ LAYOUT (mobile-only app) ══ */
  --app-max-w:       430px;         /* max-w-[430px] — hard mobile cap */
  --header-h:        52px;          /* approx: px-3 py-2.5 + content */
  --nav-h:           68px;          /* pb-[68px] main area offset */
  --nav-tab-w:       56px;          /* w-[56px] each tab */
  --bottom-sheet-h:  60vh;          /* cotizaciones / search sheet */


  /* ══ BOTTOM NAV ══ */
  --nav-color:       #9CA3AF;       /* inactive: text-gray-400 */
  --nav-color-active:#16a34a;       /* active: text-nunca */
  --nav-indicator-h: 2px;           /* active underline bar */
  --nav-icon-size:   18px;          /* w-[18px] h-[18px] */


  /* ══ STATUS BADGES ══ */
  --badge-available-bg:    #dcfce7; /* green-100 */
  --badge-available-color: #16a34a;
  --badge-sold-bg:         #fee2e2; /* red-100 */
  --badge-sold-color:      #dc2626;
  --badge-verified-bg:     #f0fdf4; /* green-50 */
  --badge-verified-color:  #16a34a;


  /* ══ FORM / INPUT ══ */
  --input-bg:          #F9FAFB;     /* bg-gray-50 */
  --input-border:      #E5E7EB;     /* border-gray-200 */
  --input-focus-ring:  rgba(22,163,74,0.08);
  --input-focus-border:#16a34a;
  --label-color:       #4B5563;     /* gray-600 */
  --label-size:        11px;
  --label-w:           600;


  /* ══ AVATAR ══ */
  --avatar-size:       56px;        /* account page: w-14 h-14 */
  --avatar-bg:         #16a34a;
  --avatar-color:      #FFFFFF;
  --avatar-font:       22px;


  /* ══ ACCOUNT STAT CARD ══ */
  --stat-bg:           #F9FAFB;     /* bg-gray-50 */
  --stat-h:            70px;        /* h-16 approx */
  --stat-num-size:     22px;        /* text-[22px] */
  --stat-num-w:        700;
  --stat-label-size:   10px;
  --stat-label-color:  #9CA3AF;


  /* ══ PRICE SLIDER (categories) ══ */
  --slider-thumb-size: 16px;
  --slider-track-h:    3px;
  --slider-thumb-bg:   #16a34a;
  --slider-thumb-border: 2px solid #FFFFFF;
  --slider-thumb-shadow: 0 1px 4px rgba(0,0,0,0.18);


  /* ══ PHOTO GALLERY (product detail) ══ */
  --gallery-h:         300px;       /* main photo height */
  --thumb-size:        56px;        /* w-[56px] h-[56px] */
  --thumb-border-active: 2px solid #16a34a;
  --thumb-border-idle:   2px solid transparent;


  /* ══ INSPECTION BADGE ══ */
  --qa-bg:             var(--nunca-bg);  /* bg-nunca-bg */
  --qa-border:         #bbf7d0;         /* border-green-200 */
  --qa-color:          #16a34a;
  --qa-size:           32px;


  /* ══ MOTION ══ */
  --fast:              120ms;
  --normal:            200ms;
  --slow:              300ms;
  --ease:              cubic-bezier(0.32, 0.72, 0, 1);  /* bottom sheet */
  --ease-out:          ease-out;

  /* Signup step indicator */
  --step-dot-active:   #16a34a;
  --step-dot-idle:     #E5E7EB;
}