/* ============================================================
   Callcorico — BASE
   Design Tokens · Reset · Typography
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');

/* ─── Custom Properties ─────────────────────────────────────── */

:root {

  /* Brand Colors */
  --color-deep-plum:          #122435;
  --color-ivory-lilac:        #EFEFEF;
  --color-vivid-purple:       #224766;
  --color-vibrant-yellow:     #CC361E;
  --color-stone-gray:         #B3B3B3;
  --color-white-soft:         #FFFFFF;

  /* Semantic Colors */
  --color-bg-primary:         var(--color-deep-plum);
  --color-bg-light:           var(--color-ivory-lilac);
  --color-bg-card-dark:       rgba(18, 36, 53, 0.72);
  --color-bg-card-light:      rgba(255, 255, 255, 0.72);
  --color-text-primary-dark:  #FFFFFF;
  --color-text-secondary-dark: rgba(239, 239, 239, 0.72);
  --color-text-muted-dark:    rgba(239, 239, 239, 0.48);
  --color-text-primary-light: var(--color-deep-plum);
  --color-text-secondary-light: rgba(18, 36, 53, 0.72);
  --color-text-muted-light:   rgba(18, 36, 53, 0.48);
  --color-border-dark:        rgba(239, 239, 239, 0.12);
  --color-border-dark-strong: rgba(239, 239, 239, 0.22);
  --color-border-light:       rgba(18, 36, 53, 0.12);
  --color-border-light-strong: rgba(18, 36, 53, 0.22);
  --color-accent-primary:     var(--color-vivid-purple);
  --color-accent-secondary:   var(--color-vibrant-yellow);
  --color-accent-warning:     #CC361E;
  --color-accent-error:       #CC361E;

  /* Gradients */
  --gradient-dark-hero:    radial-gradient(circle at 78% 18%, rgba(34,71,102,0.26) 0%, rgba(34,71,102,0.08) 32%, rgba(18,36,53,0) 62%), linear-gradient(135deg, #122435 0%, #122435 52%, #122435 100%);
  --gradient-light-hero:   linear-gradient(135deg, #EFEFEF 0%, #FFFFFF 52%, #EFEFEF 100%);
  --gradient-card-dark:    linear-gradient(145deg, rgba(239,239,239,0.08) 0%, rgba(239,239,239,0.025) 100%);
  --gradient-glow-purple:  radial-gradient(circle, rgba(34,71,102,0.35) 0%, rgba(34,71,102,0.08) 46%, rgba(34,71,102,0) 72%);

  /* Typography */
  --font-sans:    "Satoshi", "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Satoshi", "General Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", "Roboto Mono", monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --letter-spacing-tight:   -0.06em;
  --letter-spacing-display: -0.045em;
  --letter-spacing-heading: -0.035em;
  --letter-spacing-body:    -0.01em;
  --letter-spacing-label:    0.08em;

  --line-height-display: 0.95;
  --line-height-heading: 1.05;
  --line-height-body:    1.55;
  --line-height-label:   1.2;

  /* Typography Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;
  --text-6xl:  5rem;
  --text-7xl:  6rem;
  --text-hero-desktop:  clamp(3.25rem, 5.4vw, 5rem);
  --text-section-title: clamp(2.75rem, 4.4vw, 4.25rem);

  /* Heading Sizes */
  --h1-size:        clamp(3.25rem, 5.4vw, 5rem);
  --h1-line-height: 0.98;
  --h2-size:        clamp(2.65rem, 4.2vw, 4rem);
  --h2-line-height: 1;
  --h3-size:        clamp(2rem, 3vw, 3rem);
  --h3-line-height: 1;
  --h4-size:        clamp(2rem, 3vw, 2.75rem);
  --h4-line-height: 1.05;
  --h5-size:        clamp(1.5rem, 2vw, 2rem);
  --h5-line-height: 1.12;
  --h6-size:        clamp(1.125rem, 1.5vw, 1.375rem);
  --h6-line-height: 1.2;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;

  --section-padding-x-desktop: clamp(4.5rem, 6vw, 6rem);
  --section-padding-x-mobile:  1.25rem;
  --section-padding-y-desktop: clamp(6rem, 9vw, 9rem);
  --section-padding-y-mobile:  4rem;

  /* Layout */
  --container-max:    1440px;
  --container-narrow: 1180px;
  --grid-gap:         1.5rem;
  --nav-height:       6.5rem;
  --nav-offset-top:   1.875rem;

  /* Border Radius */
  --radius-xs:   0.375rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-4xl:  2.5rem;
  --radius-pill: 999px;
  --radius-card: var(--radius-2xl);
  --radius-button: var(--radius-pill);

  /* Borders */
  --border-thin-dark:   1px solid rgba(239, 239, 239, 0.12);
  --border-thin-light:  1px solid rgba(18, 36, 53, 0.12);
  --border-purple-soft: 1px solid rgba(34, 71, 102, 0.24);
  --border-yellow-soft: 1px solid rgba(204, 54, 30, 0.4);

  /* Shadows */
  --shadow-xs:           0 1px 2px rgba(18, 36, 53, 0.08);
  --shadow-sm:           0 4px 12px rgba(18, 36, 53, 0.12);
  --shadow-md:           0 12px 32px rgba(18, 36, 53, 0.18);
  --shadow-lg:           0 24px 64px rgba(18, 36, 53, 0.26);
  --shadow-xl:           0 40px 100px rgba(18, 36, 53, 0.38);
  --shadow-dashboard:    0 18px 60px rgba(18, 36, 53, 0.14);
  --shadow-card-dark:    0 20px 60px rgba(18, 36, 53, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-card-light:   0 20px 60px rgba(18, 36, 53, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-purple-glow:  0 0 32px rgba(34, 71, 102, 0.35), 0 0 80px rgba(34, 71, 102, 0.16);
  --shadow-yellow-glow:  0 0 24px rgba(204, 54, 30, 0.35), 0 0 56px rgba(204, 54, 30, 0.16);

  /* Blur / Glass */
  --blur-sm:       blur(8px);
  --blur-md:       blur(16px);
  --blur-lg:       blur(24px);
  --backdrop-glass: blur(24px) saturate(140%);

  /* Surfaces */
  --surface-dark-primary:  rgba(18, 36, 53, 0.88);
  --surface-light-primary: rgba(255, 255, 255, 0.82);
  --card-padding-sm: 1rem;
  --card-padding-md: 1.25rem;
  --card-padding-lg: 1.5rem;
  --card-padding-xl: 2rem;

  /* Motion */
  --ease-out-premium:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-premium: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring-soft:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-v2:            cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   160ms;
  --duration-base:   240ms;
  --duration-medium: 420ms;
  --duration-slow:   700ms;
  --duration-hero:   1000ms;

  /* Z-index */
  --z-base:  1;
  --z-card:  10;
  --z-nav:   50;
  --z-modal: 100;

  /* Shorthand aliases */
  --v2-bg:        #EFEFEF;
  --v2-bg-soft:   #FFFFFF;
  --v2-text:      #122435;
  --v2-text-muted: rgba(18, 36, 53, 0.62);
  --v2-border:    rgba(18, 36, 53, 0.12);
  --v2-purple:    #224766;
  --v2-yellow:    #CC361E;
  --v2-dark-card: #122435;
  --v2-gray:      #B3B3B3;
  --body-size:    18px;
}

/* ─── Reset ──────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  color: var(--v2-text);
  background-color: var(--v2-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

ul, ol {
  list-style: none;
}

/* ─── Base Elements ───────────────────────────────────────────── */

h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-line-height);
  font-weight: 600;
  letter-spacing: -0.055em;
  color: var(--v2-text);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--v2-text);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  line-height: var(--h3-line-height);
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--v2-text);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  line-height: var(--h4-line-height);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--v2-text);
}

h5 {
  font-family: var(--font-display);
  font-size: var(--h5-size);
  line-height: var(--h5-line-height);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--v2-text);
}

h6 {
  font-family: var(--font-display);
  font-size: var(--h6-size);
  line-height: var(--h6-line-height);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--v2-text);
}

p {
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  color: var(--v2-text-muted);
}

/* ─── Typography Utilities ───────────────────────────────────── */

.h1 { font-family: var(--font-display); font-size: var(--h1-size); line-height: var(--h1-line-height); font-weight: 600; letter-spacing: -0.055em; }
.h2 { font-family: var(--font-display); font-size: var(--h2-size); line-height: var(--h2-line-height); font-weight: 600; letter-spacing: -0.05em; }
.h3 { font-family: var(--font-display); font-size: var(--h3-size); line-height: var(--h3-line-height); font-weight: 600; letter-spacing: -0.045em; }
.h4 { font-family: var(--font-display); font-size: var(--h4-size); line-height: var(--h4-line-height); font-weight: 600; letter-spacing: -0.04em; }
.h5 { font-family: var(--font-display); font-size: var(--h5-size); line-height: var(--h5-line-height); font-weight: 600; letter-spacing: -0.035em; }
.h6 { font-family: var(--font-display); font-size: var(--h6-size); line-height: var(--h6-line-height); font-weight: 600; letter-spacing: -0.025em; }

.body-xl { font-family: var(--font-sans); font-size: 1.375rem; line-height: 1.5;  font-weight: 400; letter-spacing: -0.015em; }
.body-lg { font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.55; font-weight: 400; letter-spacing: -0.01em; }
.body-md { font-family: var(--font-sans); font-size: 1rem;     line-height: 1.6;  font-weight: 400; letter-spacing: -0.005em; }
.body-sm { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.55; font-weight: 400; letter-spacing: 0; }

.caption {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Screen Reader / Accessibility ─────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.wp-caption,
.gallery-caption,
.bypostauthor { color: inherit; }

.alignwide { max-width: var(--container-max); margin-inline: auto; }
.alignfull  { width: 100%; max-width: 100%; }

/* ─── Astra: Force full-width on all custom page templates ────
   Overrides Astra's boxed container, sidebar wrapper and entry-
   content max-width so sections bleed edge-to-edge.            */
body.page-template .ast-container,
body.page-template #primary.content-area,
body.page-template #main.site-main,
body.page-template .site-content,
body.page-template .entry-content,
body.page-template article.page {
  max-width: 100% !important;
  width:     100% !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
  margin-left:   0 !important;
  margin-right:  0 !important;
}

.anv-page {
  width: 100%;
  max-width: 100%;
}