/* ==========================================================================
   Dhaka Dental: design system
   Only design tokens live here. Every colour and font on the site comes
   from this file; the layout and components are in css/styles.css.
   Font: Outfit, loaded from Google Fonts in each page <head>.
   ========================================================================== */

:root {
  /* Colours */
  --color-background: #ffffff; /* page background, text on dark */
  --color-surface: #eef5fc; /* pale ice-blue panels, cards and sections */
  --color-text: #15135c; /* deep indigo-navy: text and dark panels */
  --color-muted: #5b5a8d; /* secondary text */
  --color-primary: #15135c; /* dark buttons */
  --color-primary-strong: #0c0b3d; /* hover for dark buttons, photo overlays */
  --color-on-primary: #ffffff; /* text on dark buttons and panels */
  --color-accent: #d5e7f8; /* sky-blue secondary buttons and tags */
  --color-accent-strong: #c2dbf2; /* hover for sky-blue buttons */
  --color-border: #d5e7f8;
  --color-error: #b42318;
  --color-black: #000000; /* shadows and photo overlays */

  /* Text colour at reduced strength, for secondary copy on light backgrounds.
     Every step stays above WCAG AA contrast on both white and --color-surface. */
  --color-text-80: color-mix(in srgb, var(--color-text) 80%, transparent);
  --color-text-75: color-mix(in srgb, var(--color-text) 75%, transparent);
  --color-text-70: color-mix(in srgb, var(--color-text) 70%, transparent);
  --color-text-60: color-mix(in srgb, var(--color-text) 70%, transparent);
  --color-text-50: color-mix(in srgb, var(--color-text) 68%, transparent);
  --color-text-40: color-mix(in srgb, var(--color-text) 55%, transparent); /* large text and icons only */

  /* Fonts */
  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  /* Corners */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-section: 25px;
  --radius-full: 999px;

  /* Layout */
  --container: 72rem;
  --gutter: 1.5rem;

  /* Motion */
  --ease-menu: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Shadow */
  --shadow-nav:
    0 10px 15px -3px color-mix(in srgb, var(--color-text) 10%, transparent),
    0 4px 6px -4px color-mix(in srgb, var(--color-text) 10%, transparent);
}