/* Capcat Website Design System */

/* ====================================
   FONT DECLARATIONS - SOURCE SERIF 4
   ================================== */

/* Light - 300 */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Light.woff2") format("woff2"),
    url("../fonts/SourceSerif4-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular - 400 */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Regular.woff2") format("woff2"),
    url("../fonts/SourceSerif4-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium - 500 */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Medium.woff2") format("woff2"),
    url("../fonts/SourceSerif4-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold - 600 */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-SemiBold.woff2") format("woff2"),
    url("../fonts/SourceSerif4-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold - 700 */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Bold.woff2") format("woff2"),
    url("../fonts/SourceSerif4-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold - 800 */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-ExtraBold.woff2") format("woff2"),
    url("../fonts/SourceSerif4-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Black - 900 */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Black.woff2") format("woff2"),
    url("../fonts/SourceSerif4-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Root font size for rem calculations - 16px base */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* ====================================
   GOLDEN RATIO TYPOGRAPHY SYSTEM
   ================================== */

:root {
  /* Minor Third Font Scale */
  --text-xxlarge: 2.063rem; /* 33px - h1 headers */
  --text-xlarge: 1.75rem; /* 23px - h2 headers */
  --text-large: 1.438rem; /* 20px - h3 headers */
  --text-base: 1.188rem; /* 19px - body text */
  --text-small: 1rem; /* 16px - small text, captions */

  /* Mobile typography scale */
  --mobile-text-xxlarge: 1.618rem; /* 25.888px ≈ 26px */
  --mobile-text-xlarge: 1.25rem; /* 20px */
  --mobile-text-large: 1.125rem; /* 18px */
  --mobile-text-base: 1rem; /* 16px */
  --mobile-text-small: 0.875rem; /* 14px */
}

/* ====================================
   MULTIPLES OF 8 SPACING SYSTEM
   ================================== */

:root {
  /* Multiples of 8px spacing scale */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2rem; /* 32px */
  --space-xl: 3rem; /* 48px */
  --space-xxl: 4rem; /* 64px */
  --space-xxxl: 6rem; /* 96px */

  /* Semantic spacing tokens */
  --padding-tight: var(--space-xs);
  --padding-normal: var(--space-sm);
  --padding-loose: var(--space-md);
  --padding-section: var(--space-xl);

  --margin-element: var(--space-sm);
  --margin-section: var(--space-xl);
  --margin-page: var(--space-xxl);
}

/* ====================================
   COLOR SYSTEM - CREAM & IMPRINT PALETTE
   ================================== */

:root {
  /* Primary Colors - Cream background with Ink text */
  --paper: #faf5ee;
  --imprint: #221717;
  --imprint-medium: #3a3737;
  --imprint-light: #4d4949;
  --imprint-muted: #827c7c;

  /* Primary Orange Scale */
  --orange-50: #fff6f0;
  --orange-100: #ffeadb;
  --orange-200: #ffd4b7;
  --orange-300: #ffb88f;
  --orange-400: #ff9463;
  --orange-500: #f1540d;
  --orange-600: #d64605;
  --orange-700: #b13700;
  --orange-800: #8e2c00;
  --orange-900: #6b2100;

  /* Accent Colors - Capcat Brand Orange */
  --accent-primary: var(--orange-500);
  --accent-hover: var(--orange-600);
  --accent-light: var(--orange-400);
  --accent-light-two: var(--orange-300);
  --accent-lighter: var(--orange-200);
  --accent-lighter-plus: var(--orange-100);
  --accent-dark: var(--orange-800);

  /* Accent Colors - Capcat Brand Cream */
  --accent-cream-primary: #f9f8ed;
  --accent-cream-light: #faf2e7;
  --accent-cream-soft: #faf5ee;

  /* Semantic Colors */
  --bg-color: var(--paper);
  --text-color: var(--imprint);
  --text-color-light: var(--imprint-light);
  --text-color-muted: var(--imprint-muted);
  --link-color: var(--imprint);
  --link-accent: var(--orange-500);
  --link-hover-color: var(--accent-primary);
  --border-color: rgba(26, 22, 20, 0.1);
  --shadow-color: rgba(26, 22, 20, 0.08);

  /* Component Colors */
  --header-bg: var(--paper);
  --card-bg: #fffef8;
  --code-bg: rgba(26, 22, 20, 0.03);
  --button-primary-bg: var(--accent-primary);
  --button-primary-color: #ffffff;
  --button-secondary-bg: transparent;
  --button-secondary-color: var(--imprint);
  --button-secondary-border: var(--imprint);
}

/* ====================================
   FONT WEIGHT SYSTEM
   ================================== */

:root {
  /* Standard font weight scale */
  --font-weight-thin: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Semantic font weights */
  --weight-body: var(--font-weight-normal);
  --weight-heading: var(--font-weight-light);
  --weight-medium: var(--font-weight-medium);
  --weight-emphasis: var(--font-weight-semibold);
  --weight-display: var(--font-weight-light);
  --weight-bold: var(--font-weight-bold);

  /* Font families */
  --font-family-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Courier New", monospace;
  --font-family-heading: var(--font-family-serif);
  --font-family-body: var(--font-family-sans-serif);
}

/* ====================================
   LINE HEIGHT SYSTEM
   ================================== */

:root {
  /* Optimal line heights for readability */
  --line-height-tight: 1.2; /* Headings */
  --line-height-normal: 1.4; /* UI elements */
  --line-height-relaxed: 1.6; /* Body text */
  --line-height-loose: 1.8; /* Special cases */

  /* Semantic line heights */
  --line-height-heading: 1.2;
  --line-height-subheading: 1.3;
  --line-height-body: 1.6;
  --line-height-ui: 1.4;
}

/* ====================================
   LAYOUT WIDTH SYSTEM
   ================================== */

:root {
  /* Consistent rem-based widths */
  --measure-narrow: 30rem; /* 480px - Narrow columns */
  --measure-optimal: 45.5rem; /* 728px - Optimal reading */
  --measure-wide: 60rem; /* 960px - Wide content */
  --measure-full: 75rem; /* 1200px - Maximum width */

  /* Component widths */
  --width-content: var(--measure-optimal);
  --width-wide: var(--measure-wide);
  --width-full: var(--measure-full);
}

/* ====================================
   RESPONSIVE BREAKPOINTS
   ================================== */

:root {
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1200px;
}

/* ====================================
   BORDER RADIUS SYSTEM
   ================================== */

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

/* ====================================
   TRANSITION SYSTEM
   ================================== */

:root {
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ====================================
   Z-INDEX SYSTEM
   ================================== */

:root {
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ====================================
   BOX SHADOW SYSTEM
   ================================== */

:root {
  --shadow-xs: 0 1px 2px 0 var(--shadow-color);
  --shadow-sm: 0 1px 3px 0 var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color);
  --shadow-xl: 0 20px 25px -5px var(--shadow-color);
}