/* ============================================
   CABINET DENTAIRE IBN SINA — DESIGN TOKENS
   *** COLOR SYSTEM: White + Deep Navy + Light Blues + Pink pop + Black ***  (revert: _workspace/color-experiments/)
   White base + black ink + deep navy blue structure (#0B1E5B). A family of light blues does the
   different jobs (sections, cards, links, borders, on-dark emphasis). Pink (#FF3879) is a tiny
   pop only (stars, ticks), kept off headlines.
   Typography: Source Serif 4 + Inter
   ============================================ */

:root {

  /* ---- SURFACES ---- */
  /* White dominates; a range of light blues warms the sections; deep navy for dark sections. */
  --color-bg:             #FFFFFF;     /* White — primary canvas */
  --color-bg-alt:         #F3F7FC;     /* Very light blue — alternate sections */
  --color-bg-warm:        #EAF2FB;     /* Light blue (a shade deeper) — testimonials, quotes */
  --color-bg-dark:        #0B1E5B;     /* Deep navy blue — footer, CTA bands */
  --color-bg-dark-alt:    #14286E;     /* Lighter navy — card on dark bg */

  /* ---- TEXT ---- (black ink, softened a hair for eye comfort) */
  --color-text:           #0B0D14;     /* Near-black — headings and body */
  --color-text-muted:     #454B5C;     /* Dark gray — secondary, captions */
  --color-text-subtle:    #8A90A0;     /* Gray — placeholders, disabled */
  --color-text-light:     #C6CAD6;     /* Light gray — decorative numbers, watermarks */

  /* ---- ACCENT — DEEP NAVY structure + BLUE for interaction ---- */
  /* Deep navy = structure (buttons, topbar, dark bands). Bright blue = links/icons. */
  --color-accent:         #0B1E5B;     /* Deep navy blue — primary accent / structure */
  --color-accent-hover:   #081748;     /* Deeper navy — hover states */
  --color-accent-light:   #E7ECF8;     /* Light blue tint — selected, hover bg */
  --color-accent-muted:   #2E6BE6;     /* Bright blue — links, icons (~4.9:1 on white) */
  --color-accent-wash:    #F2F6FD;     /* Ultra-light blue wash — subtle card bg */

  /* ---- FLOURISH — PINK pop (<10%, TINY spots only: stars, ticks) ---- */
  /* Pink is NOT used on eyebrows/headlines/dividers. Bright pink for small marks. */
  --color-gold:           #FF3879;     /* Pink — stars, checklist ticks, tiny accents */
  --color-gold-deep:      #0B1E5B;     /* Deep navy — eyebrows, rules on WHITE (pink kept off headlines) */
  --color-gold-hover:     #E02E68;     /* Pink hover */
  --color-gold-soft:      #FFD0E2;     /* Soft pink — subtle tint if needed */
  --color-gold-wash:      #FFF0F6;     /* Ultra-light pink wash — selected, hint card bg */

  /* ---- DARK BACKGROUND PALETTE ---- */
  /* For footer, dark CTA bands, dark hero variants. */
  --color-accent-on-dark:  #9FC0F0;    /* Light blue on navy — emphasis / flourish (eyebrows stay blue) */
  --color-text-on-dark:    #FFFFFF;    /* Primary text on dark */
  --color-text-muted-dark: #A7B0CC;    /* Muted text on dark */
  --color-border-dark:     #23306E;    /* Subtle dividers on dark */
  --color-border-dark-alt: #35427E;    /* Stronger dividers on dark */

  /* ---- BORDERS & DIVIDERS ---- (light-blue tinted) */
  --color-border:         #E2E8F2;     /* Default — cards, inputs, dividers */
  --color-border-strong:  #CBD4E4;     /* Stronger — active inputs, emphasis */
  --color-ghost-hover:    #EEF2F9;     /* Ghost button hover bg */

  /* ---- FUNCTIONAL ---- */
  /* Strictly for UI states. Never decorative. */
  --color-success:        #059669;     /* Form confirmed, green */
  --color-success-light:  #ECFDF5;     /* Success background tint */
  --color-warning:        #D97706;     /* Important notices */
  --color-warning-light:  #FFFBEB;     /* Warning background tint */
  --color-error:          #DC2626;     /* Validation errors */
  --color-error-light:    #FEF2F2;     /* Error background tint */

  /* ---- OVERLAY ---- */
  --overlay-light:        rgba(255, 255, 255, 0.6);  /* Image text overlay */
  --overlay-dark:         rgba(11, 30, 91, 0.5);      /* Modal backdrop (navy) */
  --overlay-dark-heavy:   rgba(11, 30, 91, 0.74);     /* Image text overlay on dark (navy) */

  /* ---- TYPOGRAPHY ---- */
  --font-display:   'Source Serif 4', Georgia, serif;
  --font-body:      'Inter', system-ui, sans-serif;

  /* --- TYPE SCALE --- */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  /* --- FONT WEIGHTS --- */
  --font-weight-light:     300;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* --- LINE HEIGHTS --- */
  --line-height-none:     1;
  --line-height-tight:    1.2;
  --line-height-snug:     1.375;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  /* --- LETTER SPACING --- */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.15em;

  /* ---- SPACING ---- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ---- LAYOUT ---- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;

  /* ---- BORDERS / RADIUS ---- */
  --radius-sm:   0.5rem;    /*  8px — tags, badges, small inputs */
  --radius-md:   0.75rem;   /* 12px — buttons, input fields */
  --radius-lg:   1rem;      /* 16px — small cards, dropdowns */
  --radius-xl:   1.25rem;   /* 20px — cards, modals */
  --radius-2xl:  1.5rem;    /* 24px — large cards, image containers */
  --radius-3xl:  2rem;      /* 32px — hero images, feature blocks */
  --radius-full: 9999px;    /* Pill shape — CTAs, tags */

  /* ---- SHADOWS ---- */
  /* Soft, diffused shadows — navy-tinted warmth */
  --shadow-sm:  0 1px 3px 0 rgb(11 30 91 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03);
  --shadow-md:  0 4px 12px -2px rgb(11 30 91 / 0.06), 0 2px 6px -2px rgb(0 0 0 / 0.04);
  --shadow-lg:  0 12px 28px -6px rgb(11 30 91 / 0.08), 0 4px 12px -4px rgb(0 0 0 / 0.04);
  --shadow-xl:  0 24px 48px -12px rgb(11 30 91 / 0.12), 0 8px 16px -8px rgb(0 0 0 / 0.06);
  --shadow-glow: 0 0 0 1px rgb(11 30 91 / 0.03), 0 8px 40px -8px rgb(11 30 91 / 0.1);
  --shadow-hover: 0 16px 40px -8px rgb(11 30 91 / 0.1), 0 4px 12px -4px rgb(0 0 0 / 0.04);

  /* ---- EASING CURVES ---- */
  /* Fluid, elastic — never mechanical, always alive */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out:   cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-enter:    cubic-bezier(0.0, 0.0, 0.3, 1.0);
  --ease-brand:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-silk:     cubic-bezier(0.19, 1, 0.22, 1);

  /* ---- TRANSITIONS ---- */
  --transition-fast:    180ms;
  --transition-base:    300ms;
  --transition-slow:    500ms;
  --transition-enter:   700ms;
  --transition-page:    400ms;
  --transition-hero:    1000ms;
  --transition-fluid:   800ms;

}