/* e-Tunisia design tokens.
   Swap these values to align with another product's palette/fonts —
   everything else in the UI reads from here. */

:root {
  /* City palette */
  --sidi-bou-said: #0B5CAD;  /* doors & shutters */
  --sidi-deep:     #08427D;
  --sidi-wash:     #E7F0FA;
  --chechia:       #C8102E;  /* felt hats of the souk, the flag */
  --chechia-deep:  #A00C25;
  --kairouan:      #C9922E;  /* ramparts in the sun */
  --nabeul:        #1E7A55;  /* pottery glaze */
  --djerba:        #0E9AA4;  /* lagoons */
  --tozeur:        #A4552B;  /* oasis brickwork */
  --medina:        #1D2433;  /* ink */
  --jasmine:       #FFFFFF;
  --stud:          #161B26;

  /* Semantic */
  --bg:         #FFFFFF;
  --surface:    #F4F6F9;
  --surface-2:  #EBEFF4;
  --line:       #DEE3EA;
  --text:       var(--medina);
  --muted:      #5B6476;
  --brand:      var(--chechia);
  --brand-deep: var(--chechia-deep);
  --on-brand:   #FFFFFF;
  --link:       var(--sidi-bou-said);
  --wall:       #E6EDF4;
  --door:       var(--sidi-bou-said);
  --door-frame: #FFFFFF;
  --cage:       #FFFFFF;
  --sky-1:      #BFE2F6;
  --sky-2:      #F1F8FD;
  --success:    var(--nabeul);

  --shadow-sm: 0 1px 2px rgba(29, 36, 51, .06), 0 2px 8px rgba(29, 36, 51, .05);
  --shadow-lg: 0 10px 30px rgba(29, 36, 51, .10), 0 2px 6px rgba(29, 36, 51, .06);

  /* Shape — radius follows hierarchy: controls < cards < showcase surfaces */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Type — one family drawn for Arabic and Latin together */
  --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .9375rem;   /* 15 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5625rem;  /* 25 */
  --fs-2xl: 1.953rem;  /* 31 */
  --fs-hero: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem);
  --lh-body: 1.55;

  --gutter: 24px;
  --max: 1240px;
  color-scheme: light;
}

/* Night in Sidi Bou Said: deep bay navy rather than black */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1626; --surface: #142038; --surface-2: #1B2945; --line: #26355A;
    --text: #EEF2F8; --muted: #9DAAC2;
    --brand: #F0394F; --brand-deep: #D42A40;
    --link: #79B4F2; --sidi-wash: #16294A;
    --wall: #13213B; --nabeul: #26946A; --door: #1667C0; --door-frame: #DCE5F0; --cage: #C9D4E3;
    --sky-1: #0A1430; --sky-2: #1F3566;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-lg: 0 12px 34px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1626; --surface: #142038; --surface-2: #1B2945; --line: #26355A;
  --text: #EEF2F8; --muted: #9DAAC2;
  --brand: #F0394F; --brand-deep: #D42A40;
  --link: #79B4F2; --sidi-wash: #16294A;
  --wall: #13213B; --nabeul: #26946A; --door: #1667C0; --door-frame: #DCE5F0; --cage: #C9D4E3;
  --sky-1: #0A1430; --sky-2: #1F3566;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* Easter egg: harissa mode warms everything up */
:root.harissa {
  --door: var(--chechia);
  --link: var(--chechia);
  --wall: color-mix(in srgb, var(--chechia) 14%, var(--bg));
  --sidi-wash: color-mix(in srgb, var(--chechia) 10%, var(--bg));
}