/* =============================================================
   Afilio Design System — Tokens
   Primary: #19A349 (brand green).
   Headings on foundations use green-800 #186B35.
   Body text #2C333D. Subtle #424B5F. Border #B2BFD1.
   ============================================================= */

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

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

:root {
  /* --- Brand --- */
  --afilio-brand:            #38A43E;   /* official logo green */
  --afilio-brand-ink:        #186B35;   /* green-800, section headers */
  --afilio-brand-hover:      #16873D;   /* green-700 */
  --afilio-brand-deep:       #0F4F27;

  /* --- Neutrals (Gray) --- */
  --gray-900: #21262E;
  --gray-800: #2C333D;
  --gray-700: #424B5F;
  --gray-600: #637287;
  --gray-500: #8896A8;
  --gray-400: #B2BFD1;
  --gray-300: #C4CFDD;
  --gray-200: #DEE6F0;
  --gray-100: #EAEFF5;   /* derived */
  --gray-50:  #F6F9FC;

  /* --- Blue (info / interactive) --- */
  --blue-900: #0B3F75;
  --blue-800: #0E5499;
  --blue-700: #1170D1;
  --blue-600: #4494E3;
  --blue-500: #68A7E8;
  --blue-400: #AFCCEC;
  --blue-300: #DFEBF7;
  --blue-200: #EAF4FE;
  --blue-100: #F1F7FD;
  --blue-50:  #F6FAFE;

  /* --- Red (danger) --- */
  --red-900: #7A1119;
  --red-800: #AB1824;
  --red-700: #C91E2C;
  --red-600: #DC7C7F;
  --red-500: #EA9B9E;
  --red-400: #FEBFC1;
  --red-300: #FED5D7;
  --red-200: #FEE8E9;
  --red-100: #FFF0F1;
  --red-50:  #FFF6F7;

  /* --- Green (success) --- */
  --green-900: #0B3C1D;
  --green-800: #186B35;
  --green-700: #16873D;
  --green-600: #19A349;
  --green-500: #3FBA65;
  --green-400: #7ACF95;
  --green-300: #B5E4C2;
  --green-200: #D5F0DE;
  --green-100: #E7F7EC;
  --green-50:  #EDFAF2;

  /* --- Orange (warning / notifications) --- */
  --orange-900: #4E2C07;
  --orange-800: #754212;   /* rgb(117,66,18) */
  --orange-700: #96570F;
  --orange-600: #E29542;
  --orange-500: #E5A35C;
  --orange-400: #F4C38E;
  --orange-300: #FFE8D0;
  --orange-200: #FCF2E8;
  --orange-100: #FDF7F0;
  --orange-50:  #FEFBF6;

  /* --- Purple (accent) --- */
  --purple-700: #6047FF;
  --purple-600: #7B5EFF;
  --purple-500: #9747FF;
  --purple-300: #B3A5C1;

  /* --- Product / Category colors --- */
  --care-500:      #964C52;
  --care-400:      #C56E75;
  --care-300:      #DC7C7F;
  --care-200:      #EA9B9E;
  --care-100:      #FED5D7;
  --care-50:       #FEBFC1;

  --insurance-500: #3368A5;
  --insurance-400: #5885B7;
  --insurance-300: #96B5D8;
  --insurance-200: #AFCCEC;
  --insurance-100: #DFEBF7;
  --insurance-50:  #EAF4FE;

  --document-500:  #4C7966;
  --document-400:  #71A797;
  --document-300:  #93C0B3;
  --document-200:  #BFE8DC;
  --document-100:  #D2EFE6;
  --document-50:   #EDFAF2;

  --archive-500:   #77450F;
  --archive-400:   #E29542;
  --archive-300:   #F4C38E;
  --archive-200:   #FFE8D0;
  --archive-100:   #FCF2E8;

  /* --- Semantic Tokens --- */
  --bg-default:        #F6F9FC;
  --bg-page:           #FFFFFF;
  --bg-overlay:        rgba(33,38,46,0.40);

  --surface-default:      #FFFFFF;
  --surface-subtle:       #F6F9FC;
  --surface-input:        #FFFFFF;
  --surface-button:       #FFFFFF;
  --surface-button-hover: #EAF4FE;
  --surface-danger:       #FEE8E9;
  --surface-success:      #E7F7EC;
  --surface-banner:       #EAF4FE;
  --surface-warning:      #FCF2E8;
  --surface-selection:    #DFEBF7;

  --text-default:      #2C333D;
  --text-subtle:       #424B5F;
  --text-strong:       #21262E;
  --text-on-color:     #FFFFFF;
  --text-warning:      #754212;
  --text-link:         #1170D1;
  --text-disabled:     #B2BFD1;
  --text-danger:       #C91E2C;

  --stroke-default:       #B2BFD1;
  --stroke-default-hover: #8896A8;
  --stroke-focus:         #16873D;
  --stroke-danger:        #C91E2C;
  --stroke-disabled:      #DEE6F0;
  --stroke-subtle:        #C4CFDD;

  --icon-default:      #2C333D;
  --icon-subtle:       #424B5F;
  --icon-on-color:     #FFFFFF;

  /* --- Radii --- */
  --radius-sm:     4px;
  --radius-md:     8px;   /* buttons, inputs, interactive */
  --radius-lg:    12px;   /* cards, banners */
  --radius-pill: 400px;   /* badges, avatar pills */

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px 0 rgba(151,164,186,0.10);
  --shadow-md: 0 2px 8px 0 rgba(151,164,186,0.18), 0 1px 2px 0 rgba(151,164,186,0.10);
  --shadow-lg: 0 12px 32px -4px rgba(66,75,95,0.18), 0 4px 8px -2px rgba(151,164,186,0.12);
  --shadow-focus-success: 0 0 0 4px rgba(22,135,61,0.40);
  --shadow-focus-neutral: 0 0 0 4px rgba(178,191,209,0.40);

  /* --- Spacing (8-base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;

  /* --- Typography --- */
  --font-sans: 'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-legacy: 'Open Sans', 'Inter', sans-serif;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale (desktop) */
  --type-heading-xl:  700 36px/54px var(--font-sans);   /* page title */
  --type-heading-l:   700 24px/30px var(--font-sans);   /* section */
  --type-heading-m:   700 20px/28px var(--font-sans);
  --type-heading-s:   700 16px/24px var(--font-sans);
  --type-body:        400 16px/24px var(--font-sans);
  --type-body-compact:400 14px/20px var(--font-sans);
  --type-hint:        400 14px/20px var(--font-sans);
  --type-interactive: 600 16px/24px var(--font-sans);
  --type-code:        400 16px/24px var(--font-sans);   /* Inter + ss02 tabular for IDs */
  --type-list:        400 16px/24px var(--font-sans);
}

/* ============================================================
   Element defaults
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font: var(--type-body);
  color: var(--text-default);
  background: var(--bg-page);
  letter-spacing: normal;
  font-feature-settings: "ss01", "cv07", "calt", "kern";
}
h1 { font: var(--type-heading-xl); color: var(--text-strong); letter-spacing: -0.02em; margin: 0; }
h2 { font: var(--type-heading-l);  color: var(--text-strong); letter-spacing: -0.02em; margin: 0; }
h3 { font: var(--type-heading-m);  color: var(--text-strong); letter-spacing: -0.02em; margin: 0; }
h4 { font: var(--type-heading-s);  color: var(--text-strong); margin: 0; }
p  { margin: 0; }
code, kbd, samp { font: var(--type-code); font-feature-settings: "ss01", "cv07", "calt", "kern", "ss02", "tnum"; letter-spacing: 0; }
a  {
  color: var(--text-link);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
/* Afilio link hover convention: turn into a pill with a tint (no layout shift) */
a:not(.btn):not(.wordmark) {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
a:not(.btn):not(.wordmark):hover {
  text-decoration: none;
  background: var(--blue-200);
  border-color: var(--blue-400);
}

::selection { background: var(--surface-selection); }