/* ==========================================================================
   PizzaScience — Design Tokens
   Tiered custom-property system for colors, typography, spacing, and layout.
   ========================================================================== */

:root {
  /* Claude.ai Core Design System */
  --accent: #517da4;
  --accent-hover: #3f6a8e;
  --accent-light: #e8f0f7;
  --bg-page: #faf9f7;
  --bg-sidebar: #f5f4f0;
  --bg-card: #ffffff;
  --text-primary: #1a1a18;
  --text-secondary: #6b6b67;
  --border: rgba(0, 0, 0, 0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 20px;

  /* Warm Greys Literal Palette */
  --color-gray-25:  #faf9f7; /* Page bg */
  --color-gray-50:  #f5f4f0; /* Sidebar bg */
  --color-gray-100: #ecebe6;
  --color-gray-200: #e2e1dc;
  --color-gray-300: #d4d3ce; /* Border */
  --color-gray-400: #b5b4af;
  --color-gray-500: #969590;
  --color-gray-600: #7a7974;
  --color-gray-700: #6b6b67; /* Text secondary */
  --color-gray-850: #2d2d2a;
  --color-gray-950: #1a1a18; /* Text primary */
  --color-white:    #ffffff;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-display:  clamp(1.75rem, 1.5rem + 0.75vw, 2.25rem);
  --fs-h1:       clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); /* approx 22px greeting headline */
  --fs-h2:       clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --fs-h3:       14px;
  --fs-body:     14px;
  --fs-body-sm:  13px; /* 13px sidebar items */
  --fs-caption:  11px;
  --fs-numeric:  clamp(1.75rem, 1.5rem + 0.5vw, 2.25rem);

  /* Extreme restraint on font weight: only 400 (regular) and 500 (medium). No bold/700 anywhere. */
  --fw-regular:  400;
  --fw-semibold: 500;
  --fw-bold:     500;
  --fw-extrabold:500;

  --lh-tight:    1.2;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;

  /* Letter spacing is tighter than browser defaults — around -0.01em. */
  --ls-tight:    -0.01em;
  --ls-normal:   -0.01em;
  --ls-wide:     0.01em;

  /* Spacing Scale */
  --space-2xs:  0.25rem;   /*  4px */
  --space-xs:   0.5rem;    /*  8px */
  --space-sm:   0.75rem;   /* 12px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   var(--radius-sm);
  --radius-md:   var(--radius-md);
  --radius-lg:   var(--radius-md);
  --radius-xl:   var(--radius-md);
  --radius-full: var(--radius-pill);

  /* No shadows — elevation is conveyed through background color contrast */
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-inner: none;

  /* Transitions */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   400ms;

  /* Semantic Tokens */

  /* Surfaces */
  --color-bg:              var(--bg-page);
  --color-surface:         var(--bg-card);
  --color-surface-raised:  var(--bg-card);
  --color-surface-sunken:  var(--bg-sidebar);
  --color-surface-overlay: rgba(26, 26, 24, 0.4);

  /* Primary brand */
  --color-primary:         var(--accent);
  --color-primary-hover:   var(--accent-hover);
  --color-on-primary:      #ffffff;
  --color-on-primary-muted:var(--accent-light);

  /* Accent */
  --color-accent:          var(--accent);
  --color-accent-hover:    var(--accent-hover);
  --color-accent-container:var(--accent);
  --color-accent-subtle:   var(--accent-light);
  --color-on-accent:       #ffffff;

  /* Text */
  --color-text:            var(--text-primary);
  --color-text-secondary:  var(--text-secondary);
  --color-text-tertiary:   var(--text-secondary);
  --color-text-on-dark:    var(--text-primary);
  --color-text-on-dark-muted: var(--text-secondary);

  /* Borders - Hairline borders everywhere */
  --color-border:          var(--border);
  --color-border-subtle:   rgba(0, 0, 0, 0.06);
  --color-border-accent:   var(--accent);

  /* Premium */
  --color-premium:         #b8922e;
  --color-premium-subtle:  #faf3e0;
  --color-on-premium:      #1a1a18;
  --color-gold-400:        #fad02c;
  --color-gold-500:        #f1b814;
  --color-gold-600:        #c69109;

  /* Status */
  --color-error:           #ba1a1a;
  --color-success:         #2e7d32;

  /* Typography semantic */
  --font-body:             var(--font-sans);
  --font-heading:          var(--font-sans);
  --font-numeric:          var(--font-sans);

  /* Layout */
  --sidebar-width:   220px; /* ~220px */
  --header-height:   3.5rem;
  --bottom-nav-height: 3.5rem;
  --container-max:   1200px;
  --content-gap:     var(--space-md);

  /* Cards */
  --card-bg:         var(--color-surface);
  --card-border:     var(--color-border);
  --card-radius:     var(--radius-md);
  --card-padding:    var(--space-md);
  --card-shadow:     var(--shadow-md);

  /* Sliders */
  --slider-track-height:  4px;
  --slider-track-bg:      var(--color-border-subtle);
  --slider-track-fill:    var(--color-primary);
  --slider-thumb-size:    18px;
  --slider-thumb-bg:      var(--color-surface);
  --slider-thumb-border:  var(--color-primary);
  --slider-thumb-shadow:  none;

  /* Segmented Buttons */
  --seg-bg:          var(--color-surface-sunken);
  --seg-active-bg:   var(--color-surface);
  --seg-active-shadow: none;
  --seg-radius:      var(--radius-sm);

  /* Recipe Cards */
  --recipe-card-gap:    var(--space-sm);
  --recipe-flour-bg:    var(--color-primary);
  --recipe-flour-text:  var(--color-on-primary);
  --recipe-flour-label: var(--color-on-primary-muted);

  /* Timeline */
  --timeline-bulk-bg:   var(--color-primary);
  --timeline-balled-bg: var(--color-accent-subtle);
  --timeline-height:    1.5rem;
}