/* =============================================================
   Scanord — Design Tokens
   Place this file at: app/assets/stylesheets/design_tokens.css
   Import in application.css before all other stylesheets.
   ============================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

/* -------------------------------------------------------------
   Color Tokens
   ------------------------------------------------------------- */
:root {
  /* Neutrals */
  --color-text:        #0a0a0d;   /* near-black, primary text */
  --color-text-muted:  #3d3d4d;   /* secondary / helper text */
  --color-bg:          #fafafd;   /* near-white page background */
  --color-surface:     #f0f0fa;   /* cards, panels */
  --color-border:      #d8d8f0;   /* dividers, input borders */

  /* Blue system — indigo family */
  --color-primary:     #4645c7;   /* main CTAs, active states */
  --color-primary-hover: #3534a8; /* hover / pressed */
  --color-primary-light: #ebebfb; /* tinted backgrounds, badges */
  --color-secondary:   #8a89ee;   /* secondary buttons, tags */
  --color-accent-blue: #3e3dfb;   /* links, highlights */

  /* Warm accent — amber/terracotta family */
  --color-warm:        #c97941;   /* primary warm accent */
  --color-warm-hover:  #b0672f;   /* hover state */
  --color-warm-light:  #fdf0e6;   /* tinted warm backgrounds */
  --color-warm-muted:  #e8a97a;   /* soft warm, e.g. tags, icons */

  /* Semantic / status colors */
  --color-success:     #3d8c5e;
  --color-success-light: #e6f4ed;
  --color-warning:     #c97941;   /* reuses warm accent */
  --color-warning-light: #fdf0e6;
  --color-danger:      #c0392b;
  --color-danger-light: #fdecea;

  /* Order status colors — bartender board */
  --color-status-pending:    #8a89ee;   /* indigo-muted */
  --color-status-confirmed:  #3e3dfb;   /* accent indigo */
  --color-status-preparing:  #c97941;   /* warm amber — in progress */
  --color-status-ready:      #3d8c5e;   /* green — ready to deliver */
  --color-status-delivered:  #4a4d56;   /* muted — done */
  --color-status-cancelled:  #c0392b;   /* red */

  /* Modal / overlay backgrounds */
  --color-modal-background: #eaeaf5;   /* soft lavender — modals, overlays, form sections */
}

/* -------------------------------------------------------------
   Typography Tokens
   ------------------------------------------------------------- */
:root {
  /* Families */
  --font-body:    'Hind', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
    /* DM Serif Display is used sparingly for hero headings and
       the customer-facing menu — adds warmth without sacrificing
       readability. All UI chrome uses Hind only. */

  /* Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Scale (Major Third — 1.25 ratio) */
  --text-xs:   0.640rem;   /*  ~10px */
  --text-sm:   0.800rem;   /*  ~13px */
  --text-base: 1.000rem;   /*   16px */
  --text-md:   1.250rem;   /*   20px */
  --text-lg:   1.563rem;   /*   25px */
  --text-xl:   1.953rem;   /*  ~31px */
  --text-2xl:  2.441rem;   /*  ~39px */
  --text-3xl:  3.052rem;   /*  ~49px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
}

/* -------------------------------------------------------------
   Spacing Tokens (8px base grid)
   ------------------------------------------------------------- */
:root {
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.50rem;   /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1.00rem;   /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.50rem;   /* 24px */
  --space-8:   2.00rem;   /* 32px */
  --space-10:  2.50rem;   /* 40px */
  --space-12:  3.00rem;   /* 48px */
  --space-16:  4.00rem;   /* 64px */
  --space-20:  5.00rem;   /* 80px */
}

/* -------------------------------------------------------------
   Border Radius Tokens
   ------------------------------------------------------------- */
:root {
  --radius-sm:   0.25rem;   /*  4px — inputs, badges */
  --radius-md:   0.50rem;   /*  8px — cards, buttons */
  --radius-lg:   0.75rem;   /* 12px — modals, panels */
  --radius-xl:   1.00rem;   /* 16px — large cards */
  --radius-full: 9999px;    /* pills */
}

/* -------------------------------------------------------------
   Shadow Tokens
   ------------------------------------------------------------- */
:root {
  --shadow-xs: 0 1px 2px rgba(13, 14, 16, 0.06);
  --shadow-sm: 0 1px 4px rgba(13, 14, 16, 0.08);
  --shadow-md: 0 4px 12px rgba(13, 14, 16, 0.10);
  --shadow-lg: 0 8px 24px rgba(13, 14, 16, 0.12);
  --shadow-xl: 0 16px 40px rgba(13, 14, 16, 0.14);
}

/* -------------------------------------------------------------
   Transition Tokens
   ------------------------------------------------------------- */
:root {
  --transition-fast:   100ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
}

/* -------------------------------------------------------------
   Z-index Scale
   ------------------------------------------------------------- */
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
}

/* -------------------------------------------------------------
   Base Reset & Defaults
   ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

/* Display headings — use on customer-facing pages only */
.display-heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular); /* DM Serif is elegant at regular weight */
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-md);  }
h6 { font-size: var(--text-base); }

a {
  color: var(--color-accent-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); }

/* -------------------------------------------------------------
   Tailwind CSS Variable Bridge
   Add to tailwind.config.js to expose tokens as Tailwind utilities.

   theme: {
     extend: {
       colors: {
         'primary':      'var(--color-primary)',
         'primary-hover':'var(--color-primary-hover)',
         'warm':         'var(--color-warm)',
         'warm-light':   'var(--color-warm-light)',
         'surface':      'var(--color-surface)',
         'border-base':  'var(--color-border)',
         ... etc
       }
     }
   }
   ------------------------------------------------------------- */