/* ============================================================
   Notacor - Colors & Typography
   Theme: "Le Gardien Bienveillant"
   ============================================================ */

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

@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primary - deep navy */
  --color-primary:                #000a1e;
  --color-primary-container:      #002147;
  --color-primary-fixed:          #d6e3ff;
  --color-on-primary:             #ffffff;
  --color-on-primary-container:   #708ab5;

  /* Secondary - slate blue */
  --color-secondary:              #4d6078;
  --color-secondary-container:    #cde1fe;
  --color-on-secondary:           #ffffff;
  --color-on-secondary-container: #51647c;

  /* Tertiary - action blue */
  --color-tertiary:               #087DD1;
  --color-on-tertiary:            #ffffff;

  /* Background & Surface system */
  --color-background:             #f7f9fc;
  --color-surface:                #f7f9fc;
  --color-surface-lowest:         #ffffff;
  --color-surface-low:            #f2f4f7;
  --color-surface-container:      #eceef1;
  --color-surface-high:           #e6e8eb;
  --color-surface-highest:        #e0e3e6;

  /* On-surface text */
  --color-on-surface:             #191c1e;
  --color-on-surface-variant:     #44474e;
  --color-outline:                #74777f;
  --color-outline-variant:        #c4c6cf;

  /* Error */
  --color-error:                  #ba1a1a;
  --color-error-container:        #ffdad6;
  --color-on-error:               #ffffff;
  --color-on-error-container:     #93000a;

  /* Typography Families */
  --font-display: 'Manrope', sans-serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;

  /* 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;
  --text-5xl:  3rem;

  /* Border Radii */
  --radius-sm:  0.25rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.5rem;
  --radius-xl:  0.75rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-ambient: 0 8px 40px 0 rgba(25, 28, 30, 0.06);
  --shadow-card:    0 2px 12px 0 rgba(25, 28, 30, 0.08);
  --shadow-modal:   0 24px 80px 0 rgba(25, 28, 30, 0.14);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-on-surface);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

h1 {
  font-size: var(--text-5xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-on-surface);
}
h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h4 {
  font-size: var(--text-lg);
  font-weight: 600;
}
p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-on-surface);
}

.label-uppercase {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-on-surface-variant);
}

.gradient-primary {
  background: linear-gradient(135deg, #000a1e 0%, #002147 100%);
}