/* =====================================================================
   SQUIRRO DESIGN SYSTEM
   colors_and_type.css — base tokens + semantic styles
   ===================================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Roboto";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Roboto-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Roboto-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Roboto-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Roboto-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Roboto-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Roboto-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Roboto-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "PT Serif";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PTSerif-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "PT Serif";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/PTSerif-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "PT Serif";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PTSerif-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "PT Serif";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/PTSerif-BoldItalic.ttf") format("truetype");
}

/* ---------- BASE TOKENS ---------- */
:root {
  /* Type families */
  --font-sans: "Roboto", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "PT Serif", Georgia, "Times New Roman", serif;

  /* Color — primary */
  --sq-orange: #EC6A2B;
  --sq-orange-hover: #D85A1F;     /* slightly darker for hover */
  --sq-orange-active: #BF4D17;    /* darker still for active */

  /* Color — neutrals (core) */
  --sq-text-primary: #000000;
  --sq-text-secondary: #666666;
  --sq-warm-grey: #DBD7CF;        /* dividers, subtle UI bg */
  --sq-light-grey: #E5E5E5;       /* borders */
  --sq-bg-grey: #F7F7F7;          /* sections */
  --sq-warm-ivory: #F1F0EC;       /* preferred bg alt */
  --sq-white: #FFFFFF;

  /* Color — brand backgrounds (restricted) */
  --sq-navy: #001D32;
  --sq-chestnut: #2A0A06;

  /* Color — accents (data viz only) */
  --sq-olive: #A8B86B;
  --sq-aqua: #2FC8C3;

  /* Semantic foreground / background pairs */
  --fg1: var(--sq-text-primary);     /* primary text */
  --fg2: var(--sq-text-secondary);   /* secondary text */
  --fg-on-dark: var(--sq-white);
  --bg-default: var(--sq-white);
  --bg-soft: var(--sq-warm-ivory);
  --bg-alt: var(--sq-bg-grey);
  --bg-divider: var(--sq-warm-grey);
  --border-default: var(--sq-light-grey);
  --link: var(--sq-orange);

  /* Spacing scale (only these values) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Type scale (fixed) */
  --fs-h1: 48px;  --lh-h1: 56px;
  --fs-h2: 32px;  --lh-h2: 40px;
  --fs-h3: 20px;  --lh-h3: 28px;
  --fs-body: 16px; --lh-body: 24px;
  --fs-caption: 12px; --lh-caption: 16px;

  /* Layout */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --page-margin-sm: 24px;
  --page-margin-lg: 48px;
  --section-padding: 96px;
  --card-padding: 24px;
  --max-content: 1280px;
}

/* ---------- SEMANTIC TYPE STYLES ----------
   Use these classes (or compose via tokens) instead of writing custom sizes. */

.sq-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--fg1);
  letter-spacing: 0;
  margin: 0;
}

.sq-h2 {
  font-family: var(--font-sans);
  font-weight: 300;          /* Roboto Light per rules */
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg1);
  margin: 0;
}

.sq-h3 {
  font-family: var(--font-sans);
  font-weight: 500;          /* Roboto Medium */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg1);
  margin: 0;
}

.sq-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  margin: 0;
}

.sq-body-secondary {
  color: var(--fg2);
}

.sq-caption,
.sq-overline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2);
  margin: 0 0 var(--space-1) 0;
  display: block;
}

/* Inline link */
.sq-link {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}
.sq-link:hover { text-decoration: underline; }
.sq-link:active { color: var(--sq-orange-active); }

/* Emphasis */
em, .sq-emphasis {
  font-style: italic;
  font-weight: inherit;
}

/* On-dark variants */
.on-dark { color: var(--fg-on-dark); }
.on-dark .sq-h1,
.on-dark .sq-h2,
.on-dark .sq-h3,
.on-dark .sq-body { color: var(--fg-on-dark); }
.on-dark .sq-caption,
.on-dark .sq-overline,
.on-dark .sq-body-secondary { color: rgba(255,255,255,0.7); }

/* ---------- BASE ELEMENT MAPPING (optional, opt-in) ---------- */
.sq-prose {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
}
.sq-prose h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0 0 var(--space-3); }
.sq-prose h2 { font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2); margin: var(--space-5) 0 var(--space-2); }
.sq-prose h3 { font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--space-4) 0 var(--space-1); }
.sq-prose p { margin: 0 0 var(--space-2); }
.sq-prose a { color: var(--link); text-decoration: none; }
.sq-prose a:hover { text-decoration: underline; }