/* =============================================================
   Fenja AI — Design tokens
   Derived from design/colors_and_type.css
   ============================================================= */

:root {
  /* --- Surface tiers (unbleached paper → clay) --- */
  --background:                    #faf6ee;
  --surface:                       #faf6ee;
  --surface-container-lowest:      #fffcf7;
  --surface-container-low:         #f6f2e8;
  --surface-container:             #efeadc;
  --surface-container-high:        #e7e1d0;
  --surface-container-highest:     #ddd6c3;
  --surface-variant:               #ddd6c3;

  /* --- Text --- */
  --on-surface:                    #383831;
  --on-surface-variant:            #5f5e5e;
  --on-surface-muted:              #8a887f;

  /* --- Brand --- */
  --primary:                       #5f5e5e;
  --on-primary:                    #fffcf7;

  --secondary:                     #785f53;
  --secondary-dim:                 #6b5348;
  --on-secondary:                  #ffffff;
  --secondary-fixed-dim:           #9a8679;

  /* --- Ghost border --- */
  --outline:                       #babab0;
  --outline-variant:               #babab0;
  --ghost-border-color:            rgba(186, 186, 176, 0.15);
  --ghost-border:                  1px solid var(--ghost-border-color);

  /* --- Archival Pigments (flat, matte inks) --- */
  --pigment-terracotta:            #b96b58;
  --pigment-copper:                #6d8c7c;
  --pigment-ochre:                 #c29d59;
  --pigment-indigo:                #5a6d83;
  --pigment-heather:               #8d7a85;

  /* --- Phase 2: white card surfaces + deep ink accent --- */
  --surface-card:                  #ffffff;
  --surface-card-border:           rgba(0, 0, 0, 0.08);
  --ink:                           #2c3a52;   /* deep indigo — membership card + event hero */
  --ink-text:                      #e8e0d0;   /* readable cream on --ink */
  --ink-muted:                     #b8a989;   /* muted label tone on --ink */

  /* --- Semantic state mappings --- */
  --color-success:                 var(--pigment-copper);
  --color-warning:                 var(--pigment-ochre);
  --color-danger:                  var(--pigment-terracotta);
  --color-info:                    var(--pigment-indigo);

  /* --- Type families --- */
  --font-serif:  "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:   "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type scale (responsive, clamped) --- */
  --text-display-xl:   clamp(3.5rem, 6vw, 5.5rem);
  --text-display-lg:   clamp(3rem, 5vw, 4.5rem);
  --text-display-md:   clamp(2.5rem, 4vw, 3.5rem);
  --text-headline-lg:  2.25rem;
  --text-headline-md:  1.75rem;
  --text-headline-sm:  1.375rem;
  --text-title-lg:     1.125rem;
  --text-title-md:     1rem;
  --text-body-lg:      1.0625rem;
  --text-body-md:      1rem;
  --text-body-sm:      0.875rem;
  --text-label-md:     0.8125rem;
  --text-label-sm:     0.75rem;

  /* --- Tracking --- */
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;

  /* --- Leading --- */
  --leading-tight:     1.1;
  --leading-snug:      1.25;
  --leading-normal:    1.5;
  --leading-relaxed:   1.6;
  --leading-loose:     1.75;

  /* --- Spacing scale (editorial, generous) --- */
  --space-1:   0.25rem;   /*   4px */
  --space-2:   0.5rem;    /*   8px */
  --space-3:   0.75rem;   /*  12px */
  --space-4:   1rem;      /*  16px */
  --space-5:   1.5rem;    /*  24px */
  --space-6:   2rem;      /*  32px — list separator default */
  --space-7:   2.5rem;    /*  40px */
  --space-8:   2.75rem;   /*  44px — hero-card padding */
  --space-10:  4rem;      /*  64px */
  --space-12:  5rem;      /*  80px */
  --space-16:  6rem;      /*  96px */
  --space-20:  7rem;      /* 112px — desktop lateral margin */
  --space-24:  8rem;      /* 128px */

  /* --- Radii --- */
  --radius-none: 0;
  --radius-sm:   0.375rem;   /*  6px */
  --radius-md:   0.75rem;    /* 12px — primary */
  --radius-lg:   1.25rem;    /* 20px */
  --radius-full: 9999px;

  /* --- Elevation (atmospheric, warm) --- */
  --shadow-none:    none;
  --shadow-ambient: 0 12px 32px -12px rgba(56, 56, 49, 0.06);
  --shadow-float:   0 24px 48px -16px rgba(56, 56, 49, 0.05), 0 4px 12px -4px rgba(56, 56, 49, 0.04);
  --shadow-modal:   0 40px 64px -24px rgba(56, 56, 49, 0.08), 0 8px 16px -6px rgba(56, 56, 49, 0.04);

  /* --- Glass --- */
  --glass-blur:    blur(16px);
  --glass-surface: rgba(255, 252, 247, 0.8);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-entrance: cubic-bezier(0, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.3, 0, 1, 1);
  --duration-fast: 140ms;
  --duration-med:  240ms;
  --duration-slow: 420ms;

  /* --- Layout --- */
  --content-max: 83rem;   /* 1328px — 15% wider than the original 72rem */
  --reading-max: 42rem;   /*  672px */
}