/*
 * VocaSensei Spacing & Shape Tokens
 * 4dp base grid (Material Design standard).
 * All spacing is a multiple of 4px.
 * Shape scale follows M3 specification.
 */

:root {
  /* ── Spacing scale ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Content margins ── */
  --margin-page:        var(--space-4);  /* 16px — standard page gutter */
  --margin-card:        var(--space-4);  /* 16px — card internal padding */
  --margin-section:     var(--space-6);  /* 24px — between sections */
  --margin-screen-top:  var(--space-3);  /* 12px — top of scrollable content */

  /* ── M3 Shape scale ── */
  --shape-none:        0px;
  --shape-extra-small: 4px;
  --shape-small:       8px;
  --shape-medium:      12px;
  --shape-large:       16px;
  --shape-extra-large: 28px;
  --shape-full:        9999px;

  /* ── Semantic shape aliases ── */
  --shape-button:         var(--shape-full);         /* M3 filled/tonal button = pill */
  --shape-card:           var(--shape-medium);       /* 12px */
  --shape-card-large:     var(--shape-extra-large);  /* 28px — dialog-style card */
  --shape-dialog:         var(--shape-extra-large);  /* 28px */
  --shape-chip:           var(--shape-small);        /* 8px */
  --shape-fab:            var(--shape-large);        /* 16px */
  --shape-fab-small:      var(--shape-medium);       /* 12px */
  --shape-fab-large:      var(--shape-extra-large);  /* 28px */
  --shape-input:          var(--shape-extra-small);  /* 4px top corners for TextField */
  --shape-search-bar:     var(--shape-full);         /* pill search bar */
  --shape-bottom-sheet:   var(--shape-extra-large);  /* 28px top corners */
  --shape-snackbar:       var(--shape-extra-small);  /* 4px */
  --shape-tooltip:        var(--shape-extra-small);  /* 4px */
  --shape-badge:          var(--shape-full);         /* pill badge */
  --shape-nav-indicator:  var(--shape-full);         /* pill nav indicator */

  /* ── Component sizing ── */
  --size-button-height:       40px;
  --size-button-height-sm:    32px;
  --size-button-height-lg:    48px;
  --size-icon-button:         40px;   /* touch target */
  --size-icon:                24px;   /* default icon size */
  --size-icon-sm:             18px;
  --size-icon-lg:             32px;
  --size-nav-bar-height:      80px;   /* M3 navigation bar */
  --size-top-app-bar:         64px;   /* M3 top app bar */
  --size-card-min-height:     80px;
  --size-chip-height:         32px;
  --size-input-height:        56px;   /* M3 text field */
  --size-list-item:           56px;   /* M3 list item (one line) */
  --size-list-item-2:         72px;   /* two lines */
  --size-list-item-3:         88px;   /* three lines */
}