/* SGC brand tokens. Load this file in place of variables.css for the SGC project. */
:root {
  /* Typography */
  --font-sans: "DM Sans", "Segoe UI", sans-serif;
  --font-heading: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", monospace;

  /* Brand */
  --color-primary: #111111;
  --color-primary-hover: #2b2b2b;
  --color-secondary: #eaeaea;
  --color-secondary-hover: #dedede;
  --color-accent-soft: #fff0f3;
  --color-accent-soft-strong: #ffd6df;
  --color-accent: #ff55b6;
  --color-accent-hover: #ea3da8;
  --color-accent-glow: rgba(255, 85, 107, 0.12);

  /* Surfaces */
  --color-surface-base: #ffffff;
  --color-surface-subtle: #fff7fa;
  --color-surface-muted: #fde7ef;
  --color-surface-brand: #f9b7e0;
  --color-surface-brand-strong: var(--color-primary);
  --color-surface-dark: #111111;
  --feature-card-dark-overlay-start: color-mix(in srgb, var(--color-surface-dark) 92%, transparent);
  --feature-card-dark-overlay-end: color-mix(in srgb, var(--color-surface-dark) 82%, transparent);

  /* Text */
  --color-text-primary: #111111;
  --color-text-body: #111111;
  --color-text-muted: #6b6b6b;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border: #eaeaea;
  --color-border-strong: #d9d9d9;

  /* Legacy aliases */
  --color-brand-50: var(--color-accent-soft);
  --color-brand-100: var(--color-accent-soft-strong);
  --color-brand-600: var(--color-accent);
  --color-brand-700: var(--color-accent-hover);
  --color-surface-0: var(--color-surface-base);
  --color-surface-50: var(--color-surface-subtle);
  --color-surface-100: var(--color-surface-muted);
  --color-surface-900: var(--color-surface-dark);
  --color-text-strong: var(--color-text-primary);
  --color-text: var(--color-text-body);
  --color-text-soft: var(--color-text-muted);

  /* Feedback */
  --color-success: #13795b;
  --color-warning: #b26a00;
  --color-danger: #b42318;

  /* Layout */
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 72rem;
  --container-xl: 90rem;

  /* 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;

  /* Radius */
  --radius-button: 8px;
  --radius-card: 4px;
  --radius-media: 4px;
  --radius-hero: 4px;

  /* Header */
  --header-background: var(--color-surface-base);
  --header-text: var(--color-text-primary);
  --header-text-hover: var(--color-accent);
  --header-border: rgba(17, 17, 17, 0.08);
  --header-link-weight: 600;
  --header-link-spacing: 0.01em;

  /* CTA */
  --cta-primary-background: var(--color-primary);
  --cta-primary-border: var(--color-primary);
  --cta-primary-text: var(--color-text-inverse);
  --cta-primary-background-hover: var(--color-primary-hover);
  --cta-primary-border-hover: var(--color-primary-hover);
  --cta-primary-text-hover: var(--color-text-inverse);

  --cta-secondary-background: var(--color-secondary);
  --cta-secondary-border: var(--color-secondary);
  --cta-secondary-text: var(--contrast);
  --cta-secondary-background-hover: var(--color-secondary-hover);
  --cta-secondary-border-hover: var(--color-secondary-hover);
  --cta-secondary-text-hover: var(--contrast);

  --cta-accent-background: var(--color-accent);
  --cta-accent-border: var(--color-accent);
  --cta-accent-text: var(--color-text-inverse);
  --cta-accent-background-hover: var(--color-accent-hover);
  --cta-accent-border-hover: var(--color-accent-hover);
  --cta-accent-text-hover: var(--color-text-inverse);

  --cta-ghost-background: color-mix(in srgb, var(--color-surface-base) 88%, var(--color-accent) 12%);
  --cta-ghost-border: color-mix(in srgb, var(--color-border-strong) 72%, var(--color-accent) 28%);
  --cta-ghost-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(17, 17, 17, 0.04);
  --cta-ghost-text: var(--contrast);
  --cta-ghost-background-hover: color-mix(in srgb, var(--color-surface-base) 78%, var(--color-accent) 22%);
  --cta-ghost-border-hover: color-mix(in srgb, var(--color-border-strong) 48%, var(--color-accent) 52%);
  --cta-ghost-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 10px 25px rgba(17, 17, 17, 0.08);
  --cta-ghost-text-hover: var(--accent-hover);

  --cta-nav-background: var(--cta-primary-background);
  --cta-nav-border: var(--cta-primary-border);
  --cta-nav-text: var(--cta-primary-text);
  --cta-nav-background-hover: var(--cta-primary-background-hover);
  --cta-nav-border-hover: var(--cta-primary-border-hover);
  --cta-nav-text-hover: var(--cta-primary-text-hover);

  /* Legacy CTA aliases */
  --header-cta-background: var(--cta-nav-background);
  --header-cta-background-hover: var(--cta-nav-background-hover);
  --header-cta-text: var(--cta-nav-text);

  /* Footer */
  --footer-background: #111111;
  --footer-surface: transparent;
  --footer-title: #ffffff;
  --footer-text: rgba(255, 255, 255, 0.78);
  --footer-link: #ffffff;
  --footer-link-hover: var(--color-accent);
  --footer-border: rgba(255, 255, 255, 0.1);
  --footer-bottom-background: #111111;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 18px 45px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 24px 60px rgba(17, 17, 17, 0.14);

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 240ms ease;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(255, 85, 107, 0.25);

  /* Common sizing */
  --button-height: 2.875rem;
  --section-space: clamp(4rem, 8vw, 7rem);
  --section-space-sm: clamp(3.125rem, 6vw, 3.75rem);
  --section-space-lg: clamp(5rem, 10vw, 8rem);
  --two-column-intro-max: 55ch;

  /* GenerateBlocks / GeneratePress friendly aliases */
  --base: var(--color-surface-base);
  --base-2: var(--color-surface-base);
  --base-3: var(--color-surface-base);
  --contrast: var(--color-text-primary);
  --contrast-2: var(--color-text-body);
  --contrast-3: var(--color-text-muted);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --highlights-value-color: var(--color-accent);
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  --contrast: var(--color-text-primary);
  --contrast-2: var(--color-text-body);
  --contrast-3: var(--color-text-muted);
  --base: var(--color-surface-base);
  --base-2: var(--color-surface-base);
  --base-3: var(--color-surface-base);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --highlights-value-color: var(--color-accent);
  background-color: var(--base);
  color: var(--contrast-2);
}

body .site,
body .site-header,
body .inside-article,
body .separate-containers .inside-article,
body .one-container .container,
body .site-info,
body .footer-widgets,
body .sidebar .widget,
body .inside-page-header,
body .page-header,
body .comments-area {
  background-color: var(--base);
  color: var(--contrast-2);
}

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

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

::selection {
  background: var(--color-accent-soft-strong);
  color: var(--color-text-primary);
}