/*
 * HAMA Design System — variables.css
 *
 * HOW TO RETHEME:
 *   Change --hue-primary and --sat-primary at the top.
 *   Every color, gradient, shadow, and focus ring updates automatically.
 *   Secondary palette works the same way with --hue-secondary.
 */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
     BASE HUES — edit these two variables to repaint the entire primary palette
     ───────────────────────────────────────────────────────────────────────── */
  --hue-primary:   343;   /* Rose-pink — romantic, warm                      */
  --sat-primary:   75%;   /* Saturation of primary                           */

  --hue-secondary: 261;   /* Violet — sophisticated, trustworthy             */
  --sat-secondary: 79%;   /* Saturation of secondary                         */

  --hue-neutral:   220;   /* Blue-cool neutral — works with most hues        */
  --sat-neutral:   13%;

  /* ── Primary color scale (fully derived from --hue-primary above) ── */
  --color-primary-50:  hsl(var(--hue-primary), calc(var(--sat-primary) - 35%), 96%);
  --color-primary-100: hsl(var(--hue-primary), calc(var(--sat-primary) - 20%), 92%);
  --color-primary-200: hsl(var(--hue-primary), calc(var(--sat-primary) - 10%), 84%);
  --color-primary-300: hsl(var(--hue-primary), var(--sat-primary), 73%);
  --color-primary-400: hsl(var(--hue-primary), var(--sat-primary), 63%);
  --color-primary-500: hsl(var(--hue-primary), var(--sat-primary), 57%);   /* ← base */
  --color-primary-600: hsl(var(--hue-primary), var(--sat-primary), 48%);
  --color-primary-700: hsl(var(--hue-primary), var(--sat-primary), 39%);
  --color-primary-800: hsl(var(--hue-primary), var(--sat-primary), 30%);
  --color-primary-900: hsl(var(--hue-primary), var(--sat-primary), 21%);

  /* ── Secondary color scale ── */
  --color-secondary-50:  hsl(var(--hue-secondary), calc(var(--sat-secondary) - 35%), 96%);
  --color-secondary-100: hsl(var(--hue-secondary), calc(var(--sat-secondary) - 20%), 92%);
  --color-secondary-200: hsl(var(--hue-secondary), calc(var(--sat-secondary) - 10%), 84%);
  --color-secondary-300: hsl(var(--hue-secondary), var(--sat-secondary), 73%);
  --color-secondary-400: hsl(var(--hue-secondary), var(--sat-secondary), 63%);
  --color-secondary-500: hsl(var(--hue-secondary), var(--sat-secondary), 57%);  /* ← base */
  --color-secondary-600: hsl(var(--hue-secondary), var(--sat-secondary), 48%);
  --color-secondary-700: hsl(var(--hue-secondary), var(--sat-secondary), 39%);
  --color-secondary-800: hsl(var(--hue-secondary), var(--sat-secondary), 30%);
  --color-secondary-900: hsl(var(--hue-secondary), var(--sat-secondary), 21%);

  /* ── Neutral scale ── */
  --color-neutral-0:   hsl(var(--hue-neutral), 20%, 100%);
  --color-neutral-50:  hsl(var(--hue-neutral), 20%,  98%);
  --color-neutral-100: hsl(var(--hue-neutral), 16%,  95%);
  --color-neutral-200: hsl(var(--hue-neutral), 13%,  90%);
  --color-neutral-300: hsl(var(--hue-neutral), 10%,  80%);
  --color-neutral-400: hsl(var(--hue-neutral),  8%,  62%);
  --color-neutral-500: hsl(var(--hue-neutral),  8%,  46%);
  --color-neutral-600: hsl(var(--hue-neutral),  9%,  34%);
  --color-neutral-700: hsl(var(--hue-neutral), 10%,  24%);
  --color-neutral-800: hsl(var(--hue-neutral), 11%,  15%);
  --color-neutral-900: hsl(var(--hue-neutral), 14%,   9%);

  /* ── Status colors ── */
  --hue-success: 158;
  --hue-error:     0;
  --hue-warning:  38;

  --color-success:    hsl(var(--hue-success), 60%, 36%);
  --color-success-bg: hsl(var(--hue-success), 60%, 94%);

  --color-error:    hsl(var(--hue-error), 78%, 54%);
  --color-error-bg: hsl(var(--hue-error), 78%, 95%);

  --color-warning:    hsl(var(--hue-warning), 94%, 46%);
  --color-warning-bg: hsl(var(--hue-warning), 94%, 94%);

  /* ── Semantic aliases — use these in all components ── */
  --color-primary:      var(--color-primary-500);
  --color-primary-dark: var(--color-primary-600);
  --color-secondary:    var(--color-secondary-500);

  --color-bg:           var(--color-neutral-50);
  --color-surface:      var(--color-neutral-0);
  --color-surface-2:    var(--color-neutral-100);

  --color-text:         var(--color-neutral-900);
  --color-text-muted:   var(--color-neutral-500);
  --color-text-light:   var(--color-neutral-400);

  --color-border:       var(--color-neutral-200);
  --color-border-focus: var(--color-primary-500);

  /* ── Gradients — built entirely from the hue variables above ── */
  --gradient-primary: linear-gradient(
    135deg,
    hsl(var(--hue-primary),   var(--sat-primary),   57%) 0%,
    hsl(var(--hue-secondary), var(--sat-secondary), 57%) 100%
  );

  --gradient-soft: linear-gradient(
    135deg,
    hsl(var(--hue-primary),   calc(var(--sat-primary)   - 35%), 96%) 0%,
    hsl(var(--hue-secondary), calc(var(--sat-secondary) - 35%), 96%) 100%
  );

  --gradient-primary-subtle: linear-gradient(
    135deg,
    hsl(var(--hue-primary),   calc(var(--sat-primary)   - 15%), 92%) 0%,
    hsl(var(--hue-secondary), calc(var(--sat-secondary) - 15%), 92%) 100%
  );

  /* ── Spacing — 8pt grid ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Legacy aliases — kept for backwards compatibility */
  --space-xs:  var(--space-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-6);
  --space-xl:  var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* ── Typography ── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  /* Legacy aliases */
  --font-size-sm:   var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg:   var(--text-lg);
  --font-size-xl:   var(--text-xl);
  --font-size-2xl:  var(--text-2xl);
  --font-size-3xl:  var(--text-3xl);

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;

  /* ── Border radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:      0 1px 3px hsl(0 0% 0% / 0.06), 0 1px 2px hsl(0 0% 0% / 0.04);
  --shadow-md:      0 4px 16px hsl(0 0% 0% / 0.08), 0 2px 4px hsl(0 0% 0% / 0.04);
  --shadow-lg:      0 12px 40px hsl(0 0% 0% / 0.12), 0 4px 12px hsl(0 0% 0% / 0.06);
  --shadow-primary: 0 8px 28px hsl(var(--hue-primary) var(--sat-primary) 57% / 0.28);

  /* ── Transitions ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --max-width:      640px;
  --max-width-wide: 900px;
  --header-height:  64px;
}