/* ============================================================
   ImmIQ Design Tokens — colors_and_type.css
   Source: flaiu-ai/ImmIQ codebase + brand brief
   ============================================================ */

/* ---- Proxima Nova (brand font) ----------------------------------- */
@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  src: url('fonts/proximanova_light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  src: url('fonts/proximanova_regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  src: url('fonts/proximanova_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  src: url('fonts/proximanova_boldit.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  src: url('fonts/proximanova_extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  src: url('fonts/proximanova_black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  src: url('fonts/proximanova_blackit.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

/* ---- Brand Colors ----------------------------------------- */
:root {
  --color-himmelblau:   #4A96D2;   /* Primary / Sky Blue  */
  --color-himbeerrot:   #BA3358;   /* Accent  / Raspberry */
  --color-nachtblau:    #1F2837;   /* Dark    / Night Blue */
  --color-maisgelb:     #F59D24;   /* Accent  / Corn Yellow (small use only) */

  /* Brand tints */
  --color-himmelblau-10: #EBF4FB;
  --color-himmelblau-20: #C8E2F5;
  --color-himmelblau-50: #4A96D2;
  --color-himmelblau-80: #1A5F99;

  --color-himbeerrot-10: #FAE8ED;
  --color-himbeerrot-20: #F0B8C6;
  --color-himbeerrot-50: #BA3358;
  --color-himbeerrot-80: #7A1A33;

  --color-nachtblau-10:  #E8EAED;
  --color-nachtblau-30:  #4A5568;
  --color-nachtblau-50:  #1F2837;
  --color-nachtblau-90:  #0A0F16;

  --color-maisgelb-10:   #FEF5E7;
  --color-maisgelb-50:   #F59D24;
  --color-maisgelb-80:   #B36A00;

  /* ---- Material 3 Semantic (Light theme, seeded from Himmelblau) ---- */
  --color-primary:              #4A96D2;
  --color-on-primary:           #FFFFFF;
  --color-primary-container:    #C8E2F5;
  --color-on-primary-container: #0D3A5C;

  --color-secondary:              #BA3358;
  --color-on-secondary:           #FFFFFF;
  --color-secondary-container:    #FAE8ED;
  --color-on-secondary-container: #5A0A20;

  --color-tertiary:              #F59D24;
  --color-on-tertiary:           #FFFFFF;
  --color-tertiary-container:    #FEF5E7;
  --color-on-tertiary-container: #7A4A00;

  --color-surface:              #FAFCFF;
  --color-on-surface:           #1A1C1E;
  --color-surface-variant:      #DDE3EA;
  --color-on-surface-variant:   #41484D;
  --color-outline:              #71787E;
  --color-outline-variant:      #C1C7CE;

  --color-error:                #BA1A1A;
  --color-on-error:             #FFFFFF;

  /* ---- Foreground aliases ---- */
  --fg1: #1A1C1E;       /* Primary text */
  --fg2: #41484D;       /* Secondary text */
  --fg3: #71787E;       /* Hint / muted text */
  --fg-on-primary: #FFFFFF;
  --fg-on-dark: #FFFFFF;

  /* ---- Background aliases ---- */
  --bg-surface: #FAFCFF;
  --bg-card: #FFFFFF;
  --bg-dark: #1F2837;
  --bg-primary-container: #C8E2F5;
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:              #8EC8F0;
    --color-on-primary:           #003258;
    --color-primary-container:    #004A7A;
    --color-on-primary-container: #C8E2F5;

    --color-surface:              #1A1C1E;
    --color-on-surface:           #E2E2E6;
    --color-surface-variant:      #41484D;
    --color-on-surface-variant:   #C1C7CE;

    --fg1: #E2E2E6;
    --fg2: #C1C7CE;
    --fg3: #8E9297;
    --bg-surface: #1A1C1E;
    --bg-card: #2A2C2E;
    --bg-primary-container: #004A7A;
  }
}

/* ============================================================
   Typography
   Note: ImmIQ uses system fonts (Roboto on Android, SF Pro on
   iOS). This file uses Roboto as the closest web substitute.
   ============================================================ */

:root {
  --font-sans: 'Proxima Nova', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* Material 3 Type Scale */
  --text-display-large:  57px;
  --text-display-medium: 45px;
  --text-display-small:  36px;

  --text-headline-large:  32px;
  --text-headline-medium: 28px;
  --text-headline-small:  24px;

  --text-title-large:   22px;
  --text-title-medium:  16px;   /* Section headers */
  --text-title-small:   14px;

  --text-body-large:   16px;
  --text-body-medium:  14px;   /* Default body */
  --text-body-small:   12px;

  --text-label-large:  14px;
  --text-label-medium: 12px;
  --text-label-small:  11px;   /* Chips, icon labels */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.4;
  --leading-loose:  1.6;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;   /* Labels / chips */
}

/* ============================================================
   Spacing & Layout
   ============================================================ */
:root {
  --space-4:   4px;
  --space-6:   6px;
  --space-8:   8px;
  --space-12:  12px;
  --space-14:  14px;
  --space-16:  16px;   /* Content padding */
  --space-20:  20px;
  --space-24:  24px;
  --space-28:  28px;
  --space-32:  32px;
  --space-48:  48px;
  --space-80:  80px;   /* FAB clearance at bottom */

  --radius-sm:   8px;   /* Image thumbnails */
  --radius-md:   12px;  /* Cards (Material 3 default) */
  --radius-lg:   16px;  /* Stat tiles */
  --radius-xl:   28px;  /* Dialogs (Material 3 default) */
  --radius-full: 9999px; /* Chips, pills */

  --max-content-width: 600px;
  --content-padding:   16px;
}

/* ============================================================
   Semantic utility classes
   ============================================================ */

/* Typography */
.display-large  { font-family: var(--font-sans); font-size: var(--text-display-large);  font-weight: var(--weight-regular); line-height: var(--leading-tight); }
.headline-large { font-family: var(--font-sans); font-size: var(--text-headline-large); font-weight: var(--weight-regular); line-height: var(--leading-tight); }
.headline-medium{ font-family: var(--font-sans); font-size: var(--text-headline-medium);font-weight: var(--weight-bold);    line-height: var(--leading-tight); }
.title-medium   { font-family: var(--font-sans); font-size: var(--text-title-medium);   font-weight: var(--weight-medium);  line-height: var(--leading-normal); }
.body-medium    { font-family: var(--font-sans); font-size: var(--text-body-medium);    font-weight: var(--weight-regular); line-height: var(--leading-loose); }
.label-small    { font-family: var(--font-sans); font-size: var(--text-label-small);    font-weight: var(--weight-medium);  letter-spacing: var(--tracking-wide); }

/* Color utilities */
.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-fg1       { color: var(--fg1); }
.text-fg2       { color: var(--fg2); }
.text-fg3       { color: var(--fg3); }

.bg-primary          { background-color: var(--color-primary); }
.bg-primary-container{ background-color: var(--color-primary-container); }
.bg-surface          { background-color: var(--color-surface); }
.bg-dark             { background-color: var(--color-nachtblau); }