/* ==========================================================================
   1. VARIABLES & BASE
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src:
    url("../../assets/fonts/Inter-roman.var.woff2") format("woff2-variations"),
    url("../../assets/fonts/Inter-roman.var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src:
    url("../../assets/fonts/Inter-italic.var.woff2") format("woff2-variations"),
    url("../../assets/fonts/Inter-italic.var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   FONDATIONS / TOKENS / THEMES
   Polices, tokens de base et aliases semantiques.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  /* TOKENS */
  --card-pad: 20px;
  --hairline: 1px;
  --btn-height: 36px;
  --btn-height-lg: 48px;
  --btn-pad-x: var(--space-3);
  --btn-gap: var(--space-2);
  --input-height: 36px;
  --switch-width: 46px;
  --switch-height: 26px;
  --switch-knob: 20px;
  --switch-inset: 2px;
  --icon-size: 20px;
  --icon-size-lg: 24px;
  --icon-weight: 400;
  --text-primary: #1d1d1d;
  --text-secondary: #4f6076;
  --text-muted: #6f8096;
  --color-accent: #2386c8;
  --color-accent-dark: #1e74ad;
  --color-ink: #1d1d1d;
  --color-muted: #8b8b8b;
  --color-soft: #b8b8b8;
  --color-surface: #ffffff;
  --color-day: #2a2a2a;
  --color-service: #2f2f2f;
  --color-time: #7a8298;
  --color-duration: #5b8c5a;
  --color-weekday: #2386c8;
  --color-home-info: #2386c8;
  --color-day-selected: #2386c8;
  --color-day-button: #3b3d42;
  --color-btn-dark: var(--color-accent-dark);

  --max-width-container: 1100px;
  --max-width-content: 640px;

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
  --app-vh: 1vh;

  /* Design system v1 - semantic foundation */
  --font-family-ui:
    "Inter",
    "SF Pro Display",
    "SF Pro Text",
    -apple-system,
    "Segoe UI",
    "Trebuchet MS",
    "Gill Sans",
    "Candara",
    sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.55;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-pill: 999px;

  --surface-page: #e6ebf1;
  --surface-card: #ffffff;
  --surface-subtle: #f4f7fb;
  --surface-input: #ffffff;

  --border-subtle: #d2d8e1;
  --border-default: #d8e2ec;
  --border-strong: #c3cedb;

  --shadow-1: 0 4px 12px rgba(18, 32, 56, 0.06);
  --shadow-2: 0 12px 24px rgba(18, 32, 56, 0.12);

  --state-active-bg: rgba(35, 134, 200, 0.12);
  --state-active-text: var(--color-accent);
  --state-active-border: rgba(35, 134, 200, 0.34);
  --state-focus-ring: rgba(35, 134, 200, 0.45);
  --state-disabled-bg: #f1f4f8;
  --state-disabled-text: #8d99a6;
  --state-disabled-opacity: 0.55;

  /* Compatibility aliases for progressive migration */
  --fw-body: var(--font-weight-regular);
  --fw-ui: var(--font-weight-medium);
  --lh-ui: var(--line-height-normal);

  --gap: var(--space-4);
  --gap-sm: var(--space-3);
  --content-x: var(--space-4);
  --spacing-md: var(--space-3);
  --spacing-lg: var(--space-4);
  --spacing-xl: 20px;

  --radius: var(--radius-16);
  --radius-md: 10px;
  --radius-lg: var(--radius-16);
  --control-radius: var(--radius-8);

  --bg-body: var(--surface-page);
  --bg-card: var(--surface-card);
  --input-bg: var(--surface-input);
  --card-border: var(--border-subtle);
  --border-color: var(--border-default);
  --card-shadow: var(--shadow-1);
  --toggle-row-color: var(--text-primary);
  --toggle-row-border: var(--border-subtle);
  --settings-hub-toggle-color: #29425f;
  --settings-hub-toggle-subtext-color: var(--color-muted);
  --toggle-track-border: var(--border-default);
  --toggle-track-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 242, 247, 0.96) 100%);
  --toggle-track-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 2px 6px rgba(18, 32, 56, 0.08);
  --toggle-knob-bg: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
  --toggle-knob-shadow:
    0 2px 6px rgba(18, 32, 56, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --menu-section-separator: rgba(79, 96, 118, 0.12);
  --menu-panel-bg: #f6f8fb;
  --menu-item-hover-bg: rgba(79, 96, 118, 0.05);
  --menu-item-active-bg: rgba(35, 134, 200, 0.08);
  --menu-item-active-border: rgba(35, 134, 200, 0.18);
  --menu-focus-ring: rgba(35, 134, 200, 0.24);
  --menu-close-hover-bg: rgba(79, 96, 118, 0.08);
  --menu-close-active-bg: rgba(79, 96, 118, 0.14);
  --menu-icon-passive: #5b6e85;
  --menu-footer-color: #73839b;
  --menu-title-color: #1f2d3c;
  --menu-close-color: #5b6e85;
}