/* MyLoan24 design tokens, direction A «Arco del día» (docs/brand-guide.html).
   Contrast ratios are noted where a colour is meant for text; decorative colours say so. */

:root {
  /* ---- Palette (brand names) ------------------------------------------- */
  --color-ink: #0C1B33;          /* dark surfaces, headings; 17.2:1 on white, 15.6:1 on sand */
  --color-ink-2: #13294B;        /* second dark surface (cards/banners on ink) */
  --color-ink-3: #1A3358;        /* third dark level, borders on ink */
  --color-teal-text: #087A6C;    /* links and accents on light: 5.24:1 white, 4.73:1 sand */
  --color-teal-bright: #2ED3B7;  /* accent on dark (9.1:1 on ink); primary button fill with ink text */
  --color-teal-hover: #25BFA5;   /* primary button hover (ink text 7.4:1) */
  --color-teal-tint: #E3F5F1;    /* light teal background for notes and badges */
  --color-teal-tint-line: #A8E3D8; /* border of teal-tint badges (decorative) */
  --color-teal-border: #0E9C86;  /* borders and icons on light, 3.4:1 on white (non-text UI) */
  --color-sand: #F7F3EC;         /* page and section background */
  --color-sand-2: #F3EEE5;       /* alternate band, table header; muted 4.7:1, teal-text 4.5:1 */
  --color-paper: #FFFFFF;        /* cards, forms */
  --color-amber: #E0A21B;        /* Club accent on dark only (7.7:1 on ink); decorative on light */
  --color-amber-text: #8F5F00;   /* Club text on light: 5.52:1 white, 4.99:1 sand */
  --color-amber-tint: #FBF0D9;   /* Club badge background on light */
  --color-on-dark: #FFFFFF;      /* text on ink */
  --color-on-dark-2: #B8C4D6;    /* secondary text on ink: 9.8:1 */
  --color-focus: #087A6C;        /* focus ring on light */
  --color-focus-on-dark: #2ED3B7;/* focus ring on ink */
  --color-overlay: rgba(12, 27, 51, 0.72); /* ink behind the mobile menu and the dialog */
  --color-selection: #BDEDE3;    /* text selection, ink text on it */

  /* ---- Older names still read by parts/*.css; they alias the palette above ---- */
  --color-brand-dark: var(--color-ink);
  --color-brand-surface-light: var(--color-sand);
  --color-brand-white: var(--color-paper);
  --color-cyan-glow: var(--color-teal-bright);
  --color-cyan-dark: var(--color-teal-text);
  --color-cyan-tint: rgba(46, 211, 183, 0.16);   /* focus halo of the help search field */
  --color-amber-dark: var(--color-amber-text);

  /* ---- Semantic --------------------------------------------------------- */
  --color-success: #1B7A44;        /* 5.37:1 white, 4.85:1 sand */
  --color-success-tint: #E4F2E9;
  --color-error: #B42318;          /* 6.57:1 white, 5.94:1 sand */
  --color-error-tint: #FBE9E7;
  --color-warning: #8F5F00;        /* text; icon fill may use --color-amber on dark */
  --color-warning-tint: #FBF0D9;
  --color-info: #2B5C9A;           /* 6.77:1 white */
  --color-info-tint: #E6EEF8;

  /* ---- Neutrals & typography colours ----------------------------------- */
  --color-text-main: #1E2A3B;      /* 14.5:1 white, 13.1:1 sand */
  --color-text-secondary: #4A5568; /* 7.5:1 white, 6.8:1 sand */
  --color-text-muted: #5E6B7E;     /* 5.4:1 white, 4.9:1 sand — minimum for small text */
  --color-border-light: #E3DDD2;   /* card and divider lines (decorative) */
  --color-border-subtle: #F3EEE5;  /* zebra rows, segmented control track (= sand-2) */
  --color-border-strong: #7D8799;  /* form field borders: 3.6:1 white, 3.3:1 sand */
  --color-border-dark: #2A4368;    /* dividers on ink */

  /* ---- Typography ------------------------------------------------------- */
  --font-family-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-display: "Sora", "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-size-xs: 0.75rem;    /* 12px — legal footnotes only */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;   /* Sora tops out at 800 */

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --letter-spacing-display: -0.02em;

  /* ---- Spacing ---------------------------------------------------------- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ---- Elevation: soft ink shadows only -------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(12, 27, 51, 0.06);
  --shadow-md: 0 2px 6px -1px rgba(12, 27, 51, 0.08), 0 1px 3px -1px rgba(12, 27, 51, 0.05);
  --shadow-lg: 0 8px 16px -6px rgba(12, 27, 51, 0.10), 0 2px 4px -2px rgba(12, 27, 51, 0.05);
  --shadow-xl: 0 16px 28px -12px rgba(12, 27, 51, 0.16), 0 4px 8px -4px rgba(12, 27, 51, 0.05);

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --header-height: 72px;
  --logo-height: 40px;        /* header logo; 34px under 380px */

  /* ---- Motion ----------------------------------------------------------- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-skip-link: 1000;        /* above the sticky header, the menu and the dialog */
}