/* ============================================================
   NICK'S APPLIANCE REPAIR — Design Token System v2.0
   Site: nappliancerepair.ca
   Last updated: 2026-03-03
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────────────────
     BRAND COLORS — primitive palette
     ────────────────────────────────────────────────────────── */

  /* Primary (blue) */
  --color-primary-50:   #EBF4FD;
  --color-primary-100:  #D0E7FA;
  --color-primary-200:  #A0CCF5;
  --color-primary-300:  #5FA8EC;
  --color-primary-400:  #3B8FE0;
  --color-primary-500:  #0E69C8;   /* main */
  --color-primary-600:  #0B569F;
  --color-primary-700:  #084080;
  --color-primary-800:  #18256D;   /* navy */
  --color-primary-900:  #0F1A4D;   /* navy-dark */

  /* CTA (green) — WCAG AA accessible with white text (4.8:1 contrast) */
  --color-cta-50:   #E8F8F0;
  --color-cta-100:  #C3EDD8;
  --color-cta-500:  #1d8348;   /* main — accessible */
  --color-cta-600:  #176b3e;
  --color-cta-700:  #114f2e;

  /* Accent */
  --color-accent:   #3B8FE0;

  /* Feedback */
  --color-success:  #0F9D58;
  --color-error:    #E91313;
  --color-warning:  #F5962A;
  --color-info:     #0E69C8;

  /* Neutral */
  --color-white:    #FFFFFF;
  --color-black:    #000000;
  --color-gray-50:  #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;

  /* Accent palette */
  --color-yellow:   #FDC733;
  --color-stars:    #FFD612;
  --color-pink:     #F52A85;
  --color-orange:   #F5962A;
  --color-cyan:     #1ECBEA;
  --color-purple:   #CC2AF5;
  --color-green:    #1EC651;
  --color-red:      #E91313;


  /* ──────────────────────────────────────────────────────────
     SEMANTIC COLORS — use these in components
     ────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --bg:           var(--color-white);
  --bg-alt:       #F0F9FF;
  --bg-light:     var(--color-gray-50);
  --bg-blue:      var(--color-primary-50);
  --bg-dark:      var(--color-primary-800);   /* footer bg */

  /* Surfaces (cards, panels) */
  --surface:      var(--color-white);
  --surface-2:    var(--color-gray-50);
  --card:         var(--color-white);

  /* Text */
  --text:           var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-muted:     var(--color-gray-500);
  --text-light:     var(--color-gray-400);
  --text-inverse:   var(--color-white);
  --text-navy:      var(--color-primary-800);

  /* Interactive */
  --primary:        var(--color-primary-500);
  --primary-dark:   var(--color-primary-600);
  --primary-light:  var(--color-primary-50);
  --accent:         var(--color-accent);
  --cta:            var(--color-cta-500);
  --cta-dark:       var(--color-cta-600);
  --cta-light:      var(--color-cta-50);
  --cta-red:        var(--color-error);
  --deep-blue:      var(--color-primary-900);
  --steel-blue:     var(--color-primary-400);

  /* Borders */
  --border:         var(--color-gray-200);
  --border-strong:  var(--color-gray-300);

  /* Status */
  --success:  var(--color-success);
  --error:    var(--color-error);
  --warning:  var(--color-warning);

  /* Stars / rating */
  --stars: var(--color-stars);

  /* Green alias */
  --green:      var(--color-green);
  --green-dark: var(--color-cta-700);


  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY — Font families
     ────────────────────────────────────────────────────────── */

  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fredoka One', cursive;         /* footer headings, badges */
  --font-script:  'Mrs Saint Delafield', cursive;
  --font-mono:    ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;


  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY — Font sizes
     Follows a 1.250 Major Third scale
     ────────────────────────────────────────────────────────── */

  --fs-2xs:  0.625rem;  /*  10px */
  --fs-xs:   0.75rem;   /*  12px */
  --fs-sm:   0.875rem;  /*  14px */
  --fs-base: 1rem;      /*  16px */
  --fs-md:   1.0625rem; /*  17px */
  --fs-lg:   1.125rem;  /*  18px */
  --fs-xl:   1.25rem;   /*  20px */
  --fs-2xl:  1.5rem;    /*  24px */
  --fs-3xl:  1.875rem;  /*  30px */
  --fs-4xl:  2.25rem;   /*  36px */
  --fs-5xl:  3rem;      /*  48px */
  --fs-6xl:  3.75rem;   /*  60px */

  /* Fluid display (clamps min / preferred / max) */
  --fs-display-sm: clamp(1.75rem, 4vw, 2.5rem);   /* section h2 */
  --fs-display-md: clamp(2rem,    5vw, 3.1rem);    /* hero h1 */
  --fs-display-lg: clamp(2.5rem,  6vw, 4rem);      /* landing hero */

  /* Semantic aliases */
  --fs-caption: var(--fs-xs);
  --fs-label:   var(--fs-sm);
  --fs-body:    var(--fs-base);
  --fs-h6:      var(--fs-base);
  --fs-h5:      var(--fs-lg);
  --fs-h4:      var(--fs-xl);
  --fs-h3:      var(--fs-2xl);
  --fs-h2:      var(--fs-display-sm);
  --fs-h1:      var(--fs-display-md);


  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY — Weights, line heights, letter spacing
     ────────────────────────────────────────────────────────── */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.75;

  --ls-tighter: -0.05em;
  --ls-tight:   -0.025em;
  --ls-normal:   0em;
  --ls-wide:     0.025em;
  --ls-wider:    0.05em;
  --ls-widest:   0.1em;


  /* ──────────────────────────────────────────────────────────
     SPACING — 4px base grid
     ────────────────────────────────────────────────────────── */

  --space-px:  1px;
  --space-0:   0px;
  --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-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;


  /* ──────────────────────────────────────────────────────────
     BORDER RADIUS
     ────────────────────────────────────────────────────────── */

  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    14px;
  --radius-2xl:   20px;
  --radius-3xl:   28px;
  --radius-pill:  24px;
  --radius-full:  9999px;

  --radius: var(--radius-xl);   /* default card/element radius */


  /* ──────────────────────────────────────────────────────────
     SHADOWS
     ────────────────────────────────────────────────────────── */

  --shadow-xs:    0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.12);
  --shadow-2xl:   0 24px 64px rgba(0,0,0,0.15);

  --shadow:       var(--shadow-md);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.10);

  /* Colored shadows */
  --shadow-primary: 0 4px 14px rgba(14,105,200,0.30);
  --shadow-cta:     0 4px 14px rgba(39,174,96,0.35);
  --shadow-red:     0 4px 14px rgba(233,19,19,0.30);


  /* ──────────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────────── */

  --max-w:          1200px;
  --max-w-text:     800px;
  --max-w-narrow:   640px;
  --max-w-wide:     1400px;
  --container-px:   24px;

  /* Section vertical padding */
  --section-py:     80px;
  --section-py-sm:  48px;
  --section-py-xs:  32px;

  /* Header */
  --header-h:       72px;
  --header-h-sm:    60px;


  /* ──────────────────────────────────────────────────────────
     Z-INDEX SCALE
     ────────────────────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
  --z-top:       9999;


  /* ──────────────────────────────────────────────────────────
     ANIMATION & TRANSITIONS
     ────────────────────────────────────────────────────────── */

  --duration-instant: 0ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;
  --duration-lazy:    700ms;

  --ease-linear:   linear;
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition:      var(--duration-base) var(--ease-in-out);
  --transition-fast: var(--duration-fast) var(--ease-in-out);
  --transition-slow: var(--duration-slow) var(--ease-in-out);

  --ease: 0.25s ease;  /* legacy alias */


  /* ──────────────────────────────────────────────────────────
     COMPONENT TOKENS — Button
     ────────────────────────────────────────────────────────── */

  --btn-h:        52px;
  --btn-h-sm:     40px;
  --btn-h-lg:     60px;
  --btn-px:       32px;
  --btn-px-sm:    20px;
  --btn-px-lg:    40px;
  --btn-radius:   var(--radius-full);
  --btn-fs:       var(--fs-base);
  --btn-fw:       var(--fw-semi);
  --btn-gap:      8px;


  /* ──────────────────────────────────────────────────────────
     COMPONENT TOKENS — Card
     ────────────────────────────────────────────────────────── */

  --card-radius:  var(--radius);
  --card-shadow:  var(--shadow);
  --card-border:  1px solid var(--border);
  --card-bg:      var(--surface);
  --card-p:       var(--space-6);
  --card-p-sm:    var(--space-4);


  /* ──────────────────────────────────────────────────────────
     COMPONENT TOKENS — Input / Form
     ────────────────────────────────────────────────────────── */

  --input-h:       48px;
  --input-h-sm:    40px;
  --input-radius:  var(--radius-md);
  --input-border:  1px solid var(--border);
  --input-bg:      var(--bg);
  --input-fs:      var(--fs-base);
  --input-px:      var(--space-4);


  /* ──────────────────────────────────────────────────────────
     COMPONENT TOKENS — Badge / Tag
     ────────────────────────────────────────────────────────── */

  --badge-radius: var(--radius-full);
  --badge-px:     var(--space-3);
  --badge-py:     var(--space-1);
  --badge-fs:     var(--fs-xs);
  --badge-fw:     var(--fw-semi);


  /* ──────────────────────────────────────────────────────────
     BREAKPOINTS — reference only, use in @media queries
     ────────────────────────────────────────────────────────
     xs:   480px
     sm:   640px
     md:   768px
     lg:  1024px
     xl:  1200px
     2xl: 1400px
     ────────────────────────────────────────────────────────── */

}