@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:wght@400;500;600&family=Roboto:wght@300;400;500;600;700&display=swap');

/*************************************
  CHEFCHOPS BASE TOKENS
  Plain CSS variables used like Sass variables
*************************************/

:root {
  --cc-font-sans: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cc-font-heading: "Elms Sans", var(--cc-font-sans);

  --cc-bg: #f3f6fa;







  --cc-radius-xs: 4px;
  --cc-radius-sm: 6px;
  --cc-radius-md: 8px;
  --cc-radius-lg: 12px;
  --cc-radius-xl: 16px;

  --cc-space-1: 0.25rem;
  --cc-space-2: 0.5rem;
  --cc-space-3: 0.75rem;
  --cc-space-4: 1rem;
  --cc-space-5: 1.25rem;
  --cc-space-6: 1.5rem;
  --cc-space-8: 2rem;

  --cc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --cc-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);

  --cc-container-max: 75rem;
  --cc-page-padding: clamp(0.75rem, 2vw, 1.5rem);
  --cc-card-padding: clamp(0.75rem, 1.4vw, 1.15rem);
  --cc-title-size: clamp(1.15rem, 1vw + 0.95rem, 1.6rem);
  --cc-subtitle-size: clamp(0.9rem, 0.25vw + 0.85rem, 1rem);
  --cc-body-text-size: clamp(0.95rem, 0.35vw + 0.86rem, 1.0625rem);
  --cc-text-xs: clamp(0.72rem, 0.1vw + 0.7rem, 0.8rem);
  --cc-text-sm: clamp(0.78rem, 0.2vw + 0.74rem, 0.9rem);
  --cc-card-title-size: clamp(0.92rem, 0.18vw + 0.88rem, 1rem);
  --cc-card-meta-size: var(--cc-text-sm);
  --cc-table-text-size: clamp(0.88rem, 0.28vw + 0.84rem, 1rem);
  --cc-table-head-size: clamp(0.78rem, 0.35vw + 0.72rem, 0.9rem);
  --cc-metric-value-size: clamp(1.1rem, 0.5vw + 1rem, 1.35rem);
  --cc-section-gap: clamp(0.75rem, 2vw, 1.25rem);


  --cc-input-min-height: 2.5rem;
  --cc-input-bg: #ffffff;
  --cc-input-border: var(--cc-colour-border);
  --cc-input-radius: var(--cc-radius-md);
  --cc-input-padding-x: 0.7rem;
  --cc-input-padding-y: 0.5rem;
  --cc-input-font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);

  --cc-button-min-height: 2.5rem;
  --cc-button-radius: var(--cc-radius-md);
  --cc-nav-ink: var(--cc-colour-ink);
  --cc-nav-ink-soft: var(--cc-colour-ink-soft);
  --cc-nav-line: color-mix(in srgb, var(--cc-colour-primary) 28%, var(--cc-colour-white));
  --cc-nav-line-soft: color-mix(in srgb, var(--cc-colour-primary) 20%, var(--cc-colour-white));
  --cc-nav-active-bg: color-mix(in srgb, var(--cc-colour-primary) 14%, var(--cc-colour-white));
  --cc-nav-danger: var(--cc-colour-danger);

  /* Navigation */
  --cc-nav-bg-soft: color-mix(in srgb, var(--cc-colour-primary) 8%, var(--cc-colour-white));

  /* Navigation extended */
  --cc-nav-dropdown-bg: color-mix(in srgb, var(--cc-colour-primary) 14%, var(--cc-colour-white));
  --cc-nav-hover-bg: color-mix(in srgb, var(--cc-colour-primary) 18%, var(--cc-colour-white));
  --cc-nav-panel-bg: color-mix(in srgb, var(--cc-colour-primary) 5%, var(--cc-colour-white));
  --cc-nav-muted-bg: color-mix(in srgb, var(--cc-colour-primary) 10%, var(--cc-colour-white));
  --cc-nav-muted-bg-strong: color-mix(in srgb, var(--cc-colour-primary) 16%, var(--cc-colour-white));
  --cc-nav-thumb: color-mix(in srgb, var(--cc-colour-primary) 35%, var(--cc-colour-white));
  --cc-nav-ink-muted: var(--cc-colour-ink-muted);
  --cc-nav-ink-strong: var(--cc-colour-ink-strong);
  --cc-nav-overlay: var(--cc-shadow-strong);

  /* Global colour scheme */
  --cc-colour-ink: #0f2742;
  --cc-colour-ink-strong: #111827;
  --cc-colour-ink-muted: #374151;
  --cc-colour-ink-soft: rgb(15 39 66 / 0.72);
  --cc-colour-surface: #ffffff;
  --cc-colour-surface-soft: #f8fafc;
  --cc-colour-surface-muted: #f3f4f6;
  --cc-colour-surface-raised: #f8f9fb;
  --cc-colour-line: rgb(15 39 66 / 0.28);
  --cc-colour-line-soft: rgb(15 39 66 / 0.18);
  --cc-colour-active-bg: rgb(15 39 66 / 0.08);
  --cc-colour-simply-catering-green: #73C357;
  --cc-colour-blue: #337ab7;
  --cc-colour-blue-strong: #286090;
  --cc-colour-primary: var(--cc-colour-simply-catering-green);
  --cc-colour-success: #5cb85c;
  --cc-colour-warning: #f0ad4e;
  --cc-colour-danger: #d9534f;

  /* Global colour scheme - shared app tokens */
  --cc-colour-white: #ffffff;
  --cc-colour-surface-subtle: #f9fafb;
  --cc-colour-surface-row: #e5e7eb;
  --cc-colour-surface-hover: #d1d5db;
  --cc-colour-ink-soft-strong: #152033;
  --cc-colour-text-soft: #64748b;
  --cc-colour-text-muted: #60728a;
  --cc-colour-border: #d8dee8;
  --cc-colour-border-soft: #cbd5e1;
  --cc-colour-border-muted: #b8c4d4;
  --cc-colour-primary-strong: #4f8f39;
  --cc-colour-primary-soft: #eaf3fa;
  --cc-colour-primary-line: rgb(115 195 87 / 0.28);
  --cc-colour-primary-line-strong: rgb(115 195 87 / 0.36);
  --cc-colour-primary-bg: rgb(115 195 87 / 0.10);
  --cc-colour-success-dark: #3d8b3d;
  --cc-colour-success-soft: #eef8ee;
  --cc-colour-warning-dark: #ec971f;
  --cc-colour-danger-strong: #c9302c;
  --cc-colour-danger-soft: #f9e2e2;
  --cc-colour-danger-line: #ebcccc;
  --cc-shadow-soft: rgb(15 23 42 / 0.08);
  --cc-shadow-medium: rgb(15 23 42 / 0.12);
  --cc-shadow-strong: rgb(15 23 42 / 0.18);
  --cc-overlay: rgb(15 23 42 / 0.45);

  /* Global colour scheme - extended shared tokens */
  --cc-colour-panel-soft: #e3eaf2;
  --cc-colour-panel-muted: #edf2f7;
  --cc-colour-panel-selected: #d9e2ec;
  --cc-colour-border-strong: #7f91aa;
  --cc-colour-text-panel: #526174;
  --cc-colour-table-head-bg: #f3f6fa;
  --cc-colour-table-head-text: #56677f;
  --cc-colour-status-teal: #0f766e;
  --cc-colour-status-muted: #94a3b8;
  --cc-colour-status-blue-soft: #bfdbfe;
  --cc-colour-status-blue-ring: #60a5fa;
  --cc-colour-status-blue-text: #1e3a8a;
  --cc-colour-text-slate: #334155;
  --cc-colour-surface-blue-soft: #f8fbff;
  --cc-colour-surface-cool: #eef2f7;
  --cc-colour-surface-cool-soft: #f1f5f9;
  --cc-colour-dark-action: #172033;
  --cc-colour-placeholder: #9ca3af;
  --cc-colour-body: #1f2937;
  --cc-colour-primary-line-soft: rgb(115 195 87 / 0.20);
  --cc-shadow-modal: rgb(15 23 42 / 0.25);
  --cc-shadow-bottom: rgb(0 0 0 / 0.08);
  --cc-colour-info: #5bc0de;

  /* Text on colour */
  --cc-colour-on-primary: var(--cc-colour-white);
  --cc-colour-on-blue: var(--cc-colour-white);
  --cc-colour-on-success: var(--cc-colour-white);
  --cc-colour-on-warning: var(--cc-colour-white);
  --cc-colour-on-danger: var(--cc-colour-white);
  --cc-colour-on-dark: var(--cc-colour-white);
  --cc-colour-on-soft: var(--cc-colour-ink-strong);

  /* Table colour system */
  --cc-table-head-bg: color-mix(in srgb, var(--cc-colour-primary) 12%, var(--cc-colour-white));
  --cc-table-head-text: var(--cc-colour-ink);
  --cc-table-row-bg: var(--cc-colour-white);
  --cc-table-row-alt-bg: var(--cc-colour-surface-row);
  --cc-table-row-hover-bg: var(--cc-colour-surface-hover);
  --cc-table-line: color-mix(in srgb, var(--cc-colour-primary) 26%, var(--cc-colour-white));
  --cc-table-muted-text: var(--cc-colour-ink-soft);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cc-bg);
  color: var(--cc-colour-text);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-body-text-size);
  line-height: 1.52;
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}


/* /////////////////////////////////////
   BASE / GLOBAL
///////////////////////////////////// */


:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #667085;
  --dark: #111827;
  --blue: #2563eb;
  --soft-blue: #eff6ff;
  --green: #16a34a;
  --red: #dc2626;
  --yellow: #facc15;
  --cyan: #22c7ee;
  --soft-border: #e6e8ee;
  --border: #d8dce3;
  --shadow: 0 0.375rem 1.125rem rgba(16, 24, 40, 0.06);

  --page-max: 73.75rem;
  --page-pad: clamp(0.875rem, 2vw, 1.75rem);
  --tap: 2.75rem;

  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
}

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: var(--cc-body-text-size);
  line-height: 1.52;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
}

h1,
h2,
h3 {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

/* /////////////////////////////////////
   MAIN HEADER TYPOGRAPHY
   Matches mega nav uppercase style
///////////////////////////////////// */

h1,
.app-brand-title,
.page-title {
  font-family: inherit;
  font-size: clamp(1.05rem, 0.95rem + 0.65vw, 1.45rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

h2,
.section-title,
.card h2 {
  font-family: inherit;
  font-size: clamp(0.92rem, 0.86rem + 0.35vw, 1.15rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

h3,
.card h3 {
  font-family: inherit;
  font-size: clamp(0.82rem, 0.78rem + 0.25vw, 1rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* /////////////////////////////////////
   CHEFCHOPS CANONICAL PALETTE
   Bootstrap-style colours + greys + generated soft states

   This block intentionally maps older tokens back to one cleaner system.
   Do not add random pale blues/greys elsewhere; derive them here.
///////////////////////////////////// */

:root {
  /* Core black/white */
  --cc-white: #ffffff;
  --cc-black: #000000;

  /* Greys */
  --cc-grey-50: #f8f9fa;
  --cc-grey-100: #f3f4f6;
  --cc-grey-200: #e5e7eb;
  --cc-grey-300: #d1d5db;
  --cc-grey-400: #9ca3af;
  --cc-grey-500: #6b7280;
  --cc-grey-600: #4b5563;
  --cc-grey-700: #374151;
  --cc-grey-800: #1f2937;
  --cc-grey-900: #111827;

  /* Bootstrap-style action colours */
  --cc-colour-simply-catering-green: #73C357;
  --cc-colour-blue: #337ab7;
  --cc-colour-blue-strong: #286090;
  --cc-colour-primary: var(--cc-colour-simply-catering-green);
  --cc-colour-primary-strong: #4f8f39;
  --cc-colour-info: #5bc0de;
  --cc-colour-success: #5cb85c;
  --cc-colour-success-dark: #3d8b3d;
  --cc-colour-warning: #f0ad4e;
  --cc-colour-warning-dark: #ec971f;
  --cc-colour-danger: #d9534f;
  --cc-colour-danger-strong: #c9302c;

  /* Main semantic colours */
  --cc-colour-white: var(--cc-white);
  --cc-colour-text: var(--cc-grey-900);
  --cc-colour-body: var(--cc-grey-800);
  --cc-colour-muted: var(--cc-grey-500);
  --cc-colour-border: var(--cc-grey-300);
  --cc-colour-border-soft: var(--cc-grey-300);
  --cc-colour-card-border: #9ca6b3;
  --cc-colour-panel-neutral: var(--cc-white);
  --cc-colour-recommended-border: #8a8f98;
  --cc-colour-recommended-bg: #f5f5f7;
  --cc-colour-recommended-badge-bg: #f5f5f7;
  --cc-colour-recommended-text: var(--cc-colour-ink);
  --cc-colour-border-muted: var(--cc-grey-400);
  --cc-colour-border-strong: var(--cc-grey-400);

  /* Surfaces */
  --cc-bg: var(--cc-grey-100);

  --cc-colour-surface: var(--cc-white);
  --cc-card-bg: var(--cc-white);
  --cc-sheet-bg: var(--cc-white);
  --cc-colour-surface-soft: var(--cc-grey-50);
  --cc-colour-surface-muted: var(--cc-grey-100);
  --cc-colour-surface-raised: var(--cc-white);
  --cc-colour-surface-subtle: var(--cc-grey-50);
  --cc-colour-surface-row: var(--cc-grey-50);
  --cc-colour-surface-hover: var(--cc-grey-100);

  /* Generated primary states */
  --cc-colour-primary-soft: color-mix(in srgb, var(--cc-colour-primary) 10%, var(--cc-white));
  --cc-colour-primary-bg: color-mix(in srgb, var(--cc-colour-primary) 10%, var(--cc-white));
  --cc-colour-primary-line: color-mix(in srgb, var(--cc-colour-primary) 28%, var(--cc-white));
  --cc-colour-primary-line-soft: color-mix(in srgb, var(--cc-colour-primary) 20%, var(--cc-white));
  --cc-colour-primary-line-strong: color-mix(in srgb, var(--cc-colour-primary) 36%, var(--cc-white));

  /* Soft action states */
  --cc-colour-success-soft: color-mix(in srgb, var(--cc-colour-success) 12%, var(--cc-white));
  --cc-colour-warning-soft: color-mix(in srgb, var(--cc-colour-warning) 14%, var(--cc-white));
  --cc-colour-warning-line: color-mix(in srgb, var(--cc-colour-warning) 55%, var(--cc-white));
  --cc-colour-danger-soft: color-mix(in srgb, var(--cc-colour-danger) 12%, var(--cc-white));
  --cc-colour-danger-line: color-mix(in srgb, var(--cc-colour-danger) 28%, var(--cc-white));

  /* Ink/text aliases */
  --cc-colour-ink: #0f2742;
  --cc-colour-ink-strong: var(--cc-grey-900);
  --cc-colour-ink-muted: var(--cc-grey-700);
  --cc-colour-ink-soft: rgb(15 39 66 / 0.72);
  --cc-colour-ink-soft-strong: var(--cc-grey-800);
  --cc-colour-text-soft: var(--cc-grey-500);
  --cc-colour-text-muted: var(--cc-grey-500);
  --cc-colour-text-slate: var(--cc-grey-700);

  /* Nav generated from primary */
  --cc-nav-bg: var(--cc-white);
  --cc-nav-ink: var(--cc-colour-ink);
  --cc-nav-ink-soft: var(--cc-colour-ink-soft);
  --cc-nav-ink-muted: var(--cc-colour-ink-muted);
  --cc-nav-ink-strong: var(--cc-colour-ink-strong);
  --cc-nav-line: color-mix(in srgb, var(--cc-colour-primary) 28%, var(--cc-white));
  --cc-nav-line-soft: color-mix(in srgb, var(--cc-colour-primary) 20%, var(--cc-white));
  --cc-nav-active-bg: color-mix(in srgb, var(--cc-colour-primary) 14%, var(--cc-white));
  --cc-nav-bg-soft: color-mix(in srgb, var(--cc-colour-primary) 8%, var(--cc-white));
  --cc-nav-dropdown-bg: color-mix(in srgb, var(--cc-colour-primary) 12%, var(--cc-white));
  --cc-nav-hover-bg: color-mix(in srgb, var(--cc-colour-primary) 18%, var(--cc-white));
  --cc-nav-panel-bg: color-mix(in srgb, var(--cc-colour-primary) 5%, var(--cc-white));
  --cc-nav-muted-bg: color-mix(in srgb, var(--cc-colour-primary) 10%, var(--cc-white));
  --cc-nav-muted-bg-strong: color-mix(in srgb, var(--cc-colour-primary) 16%, var(--cc-white));
  --cc-nav-thumb: color-mix(in srgb, var(--cc-colour-primary) 35%, var(--cc-white));
  --cc-nav-danger: var(--cc-colour-danger);

  /* Tables generated from primary */
  --cc-table-head-bg: color-mix(in srgb, var(--cc-colour-primary) 12%, var(--cc-white));
  --cc-table-head-text: var(--cc-colour-ink);
  --cc-table-row-bg: var(--cc-white);
  --cc-table-row-alt-bg: var(--cc-colour-surface-row);
  --cc-table-row-hover-bg: var(--cc-colour-surface-hover);
  --cc-table-line: color-mix(in srgb, var(--cc-colour-primary) 26%, var(--cc-white));
  --cc-table-muted-text: var(--cc-colour-ink-soft);

  /* Panels */
  --cc-colour-panel-soft: var(--cc-colour-surface-cool);
  --cc-colour-panel-muted: var(--cc-colour-surface-cool-soft);
  --cc-colour-panel-selected: var(--cc-colour-surface-hover);
  --cc-colour-text-panel: var(--cc-grey-600);

  /* Status colours */
  --cc-colour-status-teal: #0f766e;
  --cc-colour-status-muted: var(--cc-grey-400);
  --cc-colour-status-blue-soft: color-mix(in srgb, var(--cc-colour-primary) 22%, var(--cc-white));
  --cc-colour-status-blue-ring: color-mix(in srgb, var(--cc-colour-primary) 62%, var(--cc-white));
  --cc-colour-status-blue-text: #1e3a8a;

  /* Shared UI effects */
  --cc-focus-ring-danger: color-mix(in srgb, var(--cc-colour-danger) 16%, transparent);
  --cc-danger-alert-bg: color-mix(in srgb, var(--cc-colour-danger) 12%, var(--cc-white));
  --cc-danger-alert-border: var(--cc-colour-danger);
  --cc-danger-alert-text: var(--cc-colour-danger-strong);
  --cc-danger-alert-ring: color-mix(in srgb, var(--cc-colour-danger) 22%, transparent);
  --cc-status-success-bg: color-mix(in srgb, var(--cc-colour-success) 12%, var(--cc-white));
  --cc-status-success-border: var(--cc-colour-success);
  --cc-status-success-text: var(--cc-colour-success-dark);
  --cc-focus-ring-primary: color-mix(in srgb, var(--cc-colour-primary) 16%, transparent);
  --cc-swatch-inset-ring: rgb(255 255 255 / 0.65);
  --cc-swatch-outline-ring: rgb(15 23 42 / 0.08);


  /* Upload overlay */
  --cc-upload-overlay-bg: rgb(255 255 255 / 0.88);
  --cc-upload-card-shadow: 0 1rem 2.5rem rgb(15 23 42 / 0.18);
  --cc-upload-progress-bg: var(--cc-grey-200);
  --cc-upload-progress-fill: linear-gradient(90deg, var(--cc-colour-primary), var(--cc-colour-info));

  /* Shadows / overlays */
  --cc-shadow-soft: rgb(15 23 42 / 0.08);
  --cc-shadow-medium: rgb(15 23 42 / 0.12);
  --cc-shadow-strong: rgb(15 23 42 / 0.18);
  --cc-shadow-dashboard-card: -0.14rem -0.14rem 0.55rem rgb(15 23 42 / 0.05), 0 0.18rem 0.8rem rgb(15 23 42 / 0.07), 0.4rem 0.85rem 1.6rem rgb(15 23 42 / 0.13);
  --cc-shadow-dashboard-card-hover: -0.18rem -0.18rem 0.7rem rgb(15 23 42 / 0.06), 0 0.24rem 0.95rem rgb(15 23 42 / 0.09), 0.5rem 1.05rem 1.95rem rgb(15 23 42 / 0.17);
  --cc-shadow-modal: rgb(15 23 42 / 0.25);
  --cc-shadow-bottom: rgb(0 0 0 / 0.08);
  --cc-overlay: rgb(15 23 42 / 0.45);
}