/* Inter stands in for Neue Haas Grotesk (see DESIGN_consulting.md) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@layer base {
  :root {
    /* Light-only editorial system — warm cream canvas, bark-brown ink */
    color-scheme: light;

    /* Canvas & surfaces */
    --color-bg: #fff9ee;                 /* Cream Parchment — page canvas */
    --color-bg-alt: #fff9ee;             /* no alternating bands; body stays cream */
    --color-surface: #fff9ee;            /* cards sit on cream, separated by hairlines */
    --color-surface-elevated: #ffffff;   /* Paper White — elevated panels */
    --color-surface-hover: #fdf3de;
    --color-surface-border: #c5bdb3;     /* Stone — hairlines */
    --color-surface-border-hover: #3f322a;

    /* Hero overlay — protects white text over photography */
    --color-overlay-start: rgba(34, 27, 21, 0.62);
    --color-overlay-mid: rgba(34, 27, 21, 0.28);
    --color-overlay-end: rgba(34, 27, 21, 0.05);

    /* Ink */
    --color-text-primary: #3f322a;       /* Bark Brown — replaces black */
    --color-text-secondary: #796e65;     /* Earth */
    --color-text-muted: #9f968c;         /* Warm Gray */

    /* Single chromatic action color */
    --color-accent: #004e4e;             /* Deep Teal */
    --color-accent-hover: #003a3a;
    --color-accent-subtle: rgba(0, 78, 78, 0.06);
    --color-accent-glow: transparent;

    /* Editorial accent strokes (borders only, never fills) */
    --color-accent-aubergine: #560e4b;
    --color-accent-iris: #a56eff;
    --color-accent-cobalt: #3074f9;
    --color-accent-ice: #bfebfe;

    /* Feedback */
    --color-success: #004e4e;
    --color-success-bg: rgba(0, 78, 78, 0.06);
    --color-error: #99321f;

    /* Typography — one grotesque carries the whole interface */
    --font-heading: 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Type scale — tight editorial register (12 / 14 / 16 / 22 / 24 / 30 / 43 / 68) */
    --font-size-xs: 0.75rem;                                   /* 12px — labels, captions */
    --font-size-sm: 0.875rem;                                  /* 14px — body */
    --font-size-base: 1rem;                                    /* 16px — editorial body */
    --font-size-md: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);   /* 18–22px */
    --font-size-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 20–24px */
    --font-size-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);   /* 24–30px */
    --font-size-xxl: clamp(1.75rem, 1.35rem + 1.7vw, 2.6875rem); /* 28–43px */
    --font-size-display: clamp(2.25rem, 1.6rem + 3.2vw, 4.25rem); /* 36–68px */

    /* Line heights */
    --line-height-heading: 1.09;
    --line-height-body: 1.5;
    --line-height-code: 1.5;

    /* Tracking */
    --tracking-label: 0.017em;
    --tracking-wordmark: 0.09em;

    /* Weights — 400 whispers, 700 is reserved for labels and wordmarks */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing (base unit 4px) */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.75rem;    /* 12px */
    --spacing-md: 1.25rem;    /* 20px */
    --spacing-lg: 2.5rem;     /* 40px */
    --spacing-xl: clamp(2.5rem, 2rem + 2vw, 4rem);
    --spacing-xxl: clamp(4rem, 3rem + 3vw, 5rem);   /* 80px cap */
    --section-padding: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);

    /* Radii — 2px editorial edge; 15px reserved for imagery */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 15px;
    --radius-round: 9999px;

    /* Elevation is achieved with hairlines, never shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-inset: none;
    --shadow-accent-glow: none;

    /* Durations & easings */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Page constraints */
    --max-width-content: 1280px;
    --max-width-narrow: 800px;
    --max-width-prose: 680px;
    --header-height: 56px;
  }
}