/* Kmusta brand v2 — geometry (DRAFT until Phase 1 founder sign-off)
   ============================================================================
   THIS FILE IS THE HALF THAT ACTUALLY FIXES THE COMPLAINT.

   The founder's objection was that the pages feel "text-heavy and visually
   flat". A palette swap alone answers none of that — it ships the same flat
   pages in beige. Flatness is radius, elevation, and whitespace. That is this
   file, and no phase of the makeover is done until BOTH brand-v2.css and this
   have been applied to the surface.

   Values from Brand Foundry/reference/mockup-tokens-chatgpt.json (radii,
   spacing, shadows, component anatomy), unmodified — geometry has no contrast
   gate to fail, so unlike the palette nothing here needed adjusting.

   Relationship to the v1 files: radius.css / spacing.css / shadows.css keep
   their own scales for the marketing site's existing rhythm. This file adds the
   v2 SEMANTIC shapes on top. Where both define a look, the surface links this
   one later and it wins.

   NOT LINKED BY ANY PAGE YET (Phase 0 is draft-only).
   ============================================================================ */
:root {
  /* ---- Radii ------------------------------------------------------------ */
  --radius-card:       16px;  /* the default card */
  --radius-card-lg:    18px;  /* hero / feature card */
  --radius-screen:     34px;  /* phone-frame and full-bleed panel corners */
  --radius-button:     24px;  /* rectangular button */
  --radius-pill:      999px;  /* THE signature shape — primary actions, tags */
  --radius-input:      24px;  /* text fields, selects */
  --radius-chip:       14px;  /* category chip */
  --radius-image:      14px;  /* image container */
  --radius-thumb:      12px;  /* product thumbnail */
  --radius-stepper:    22px;  /* quantity stepper */
  --radius-nav:        24px;  /* floating bottom nav */
  --radius-icon-btn:   20px;  /* icon button */

  /* ---- Elevation -------------------------------------------------------- */
  /* Espresso-tinted, never cold grey. Alphas are deliberately low: the depth
     comes from whitespace first and shadow second. */
  --shadow-card:      0 4px 16px rgba(56, 42, 32, 0.08);
  --shadow-card-lift: 0 8px 24px rgba(56, 42, 32, 0.10);
  --shadow-button:    0 3px  8px rgba(56, 42, 32, 0.12);
  --shadow-floating:  0 4px 12px rgba(56, 42, 32, 0.14);
  --shadow-screen:    0 10px 30px rgba(56, 42, 32, 0.12);

  /* ---- Spacing: the anti-density rules ---------------------------------- */
  /* These are MINIMUMS, not suggestions. A section that reads as cramped is
     almost always violating --space-section or --space-card-gap. */
  --space-screen-edge:     20px; /* never let content touch the viewport edge */
  --space-screen-top:      18px;
  --space-screen-bottom:   20px;
  --space-card-pad:        16px; /* interior padding of a standard card */
  --space-card-pad-tight:  12px; /* compact card only */
  --space-card-gap:        10px; /* between sibling cards in a list or grid */
  --space-grid-gap:        10px;
  --space-section:         24px; /* between sections — the breathing room */
  --space-title-to-body:   12px;
  --space-heading-to-body:  8px;
  --space-label-to-input:   8px;
  --space-icon-to-label:    4px;
  --space-to-bottom-nav:   12px;

  /* ---- Control sizing --------------------------------------------------- */
  --control-height:        42px; /* pill button, stepper — one height, always */
  --control-pad-x:         24px; /* pill button horizontal padding */
  --control-pad-y:         13px;
  --input-pad-x:           16px;
  --input-pad-y:           12px;
  --chip-pad-x:            12px;
  --chip-pad-y:            10px;
  --nav-height:            64px;
  --nav-pad-x:             12px;
  --nav-pad-y:             10px;

  /* ---- Icon sizing ------------------------------------------------------ */
  --icon-chip:   22px;
  --icon-nav:    20px;
  --icon-step:   16px;
}

/* ---------------------------------------------------------------------------
   Component anatomy, carried from the mockup token spec.

   These are the five shapes the mockup is actually made of. They are written as
   custom properties rather than classes on purpose: the marketing site, the
   cart pages, the feedback app and the OS mockup each have their own class
   names and none of them can share a stylesheet. What they CAN share is the
   numbers. A component is "v2" when its measurements come from here.

   pill button    height --control-height · radius --radius-pill
                  pad --control-pad-y/--control-pad-x · shadow --shadow-button
                  default  fill --cta-bg,        text --cta-text
                  pressed  fill --cta-bg-pressed, text --cta-text
                  disabled fill --color-cream-deep, text --color-ink-muted

   category chip  radius --radius-chip · pad --chip-pad-y/--chip-pad-x
                  icon --icon-chip above a 10px label
                  default  fill --surface-card, border --color-border-control
                  selected fill --color-espresso, icon+label --color-on-espresso

   product card   radius --radius-card · pad 10px · shadow --shadow-card
                  fill --surface-card · border --color-divider
                  1:1 image at --radius-thumb, then 8px, title, 4px, price

   quantity step  radius --radius-stepper · height --control-height
                  fill --surface-card · border --color-border-control
                  pressed fill --color-espresso with --color-on-espresso icon
                  disabled border+icon --color-ink-muted

   bottom nav     radius --radius-nav · height --nav-height
                  fill --surface-card · border --color-divider
                  shadow --shadow-card-lift · four equal destinations
                  selected --color-ink · unselected --color-ink-muted
   --------------------------------------------------------------------------- */