/* =============================================================
   Design Tokens  —  Layer 1 of 4
   Depends on: nothing
   Consumed by: base.css, layout.css, home.css

   Naming convention:
     Raw tokens      --color-*, --space-*, --radius-*, --shadow-*
     Semantic tokens --color-text, --color-surface-*, --color-brand,
                     --text-*, --title-*, --lineheight-*, --weight-*
     Component tokens --card-*, --button-*
   ============================================================= */

/* ****************************************
	* RAW SCALES
	**************************************** */

/* ── Brand colors ──────────────────────────────────────────
	* Created Radix palette for original pmax colors:
	* - Primary: #157c82 teal,
	* - Accent: #f2cd68 gold accent (Radix calls it "yellow" when building it)
	* Recreate at `https://www.radix-ui.com/colors/custom`
	* Use in components that reference this with semantic names
	* Do NOT use these colors directly beyond this file  */
/* Primary teal scale */
:root {
	--color-primary-1: #f9fefe;
	--color-primary-2: #f3fbfb;
	--color-primary-3: #def7f9;
	--color-primary-4: #caf2f4;
	--color-primary-5: #b5e9ec;
	--color-primary-6: #9edde1;
	--color-primary-7: #81ccd1;
	--color-primary-8: #52b7bd;
	--color-primary-9: #157c82;
	--color-primary-10: #006e74;
	--color-primary-11: #05757b;
	--color-primary-12: #194144;

	--color-primary-a1: #00d5d506;
	--color-primary-a2: #00aaaa0c;
	--color-primary-a3: #00c2d121;
	--color-primary-a4: #00c1cb35;
	--color-primary-a5: #01b4be4a;
	--color-primary-a6: #00a6b161;
	--color-primary-a7: #0098a27e;
	--color-primary-a8: #00959ead;
	--color-primary-a9: #007077ea;
	--color-primary-a10: #006e74;
	--color-primary-a11: #007278fa;
	--color-primary-a12: #002c30e6;

	--color-primary-contrast: #fff;
	--color-primary-surface: #f0fafacc;
	--color-primary-indicator: #157c82;
	--color-primary-track: #157c82;
}

/* Accent gold scale */
:root {
	--color-accent-1: #fefdfb;
	--color-accent-2: #fffae8;
	--color-accent-3: #fff3bf;
	--color-accent-4: #ffea98;
	--color-accent-5: #ffe071;
	--color-accent-6: #f9d46f;
	--color-accent-7: #e7c25f;
	--color-accent-8: #d5ab29;
	--color-accent-9: #ffc800;
	--color-accent-10: #f2be00;
	--color-accent-11: #977100;
	--color-accent-12: #453a1a;

	--color-accent-a1: #c0800004;
	--color-accent-a2: #ffc80017;
	--color-accent-a3: #ffd00040;
	--color-accent-a4: #ffcc0067;
	--color-accent-a5: #ffc8008e;
	--color-accent-a6: #f5b30090;
	--color-accent-a7: #d99e00a0;
	--color-accent-a8: #cd9b00d6;
	--color-accent-a9: #ffc800;
	--color-accent-a10: #f2be00;
	--color-accent-a11: #977100;
	--color-accent-a12: #302400e5;

	--color-accent-contrast: #292109;
	--color-accent-surface: #fff9e2cc;
	--color-accent-indicator: #ffc800;
	--color-accent-track: #ffc800;
}

/* ── Neutral colors ────────────────────────────────────────
	 * Original Radix Sage scale (`https://www.radix-ui.com/colors/docs/palette-composition/scales`) with custom names
	 */

/* Neutral sage scale */
:root {
	--color-neutral-1: #fbfdfc;
	--color-neutral-2: #f7f9f8;
	--color-neutral-3: #eef1f0;
	--color-neutral-4: #e6e9e8;
	--color-neutral-5: #dfe2e0;
	--color-neutral-6: #d7dad9;
	--color-neutral-7: #cbcfcd;
	--color-neutral-8: #b8bcba;
	--color-neutral-9: #868e8b;
	--color-neutral-10: #7c8481;
	--color-neutral-11: #5f6563;
	--color-neutral-12: #1a211e;
}

/* ── Additional raw colors ─────────────────────────────────
	* These are not part of a scale, but are foundational raw tokens used in semantic tokens below. */
:root {
	--color-warm-sandy-gold: #d2af77;
	/* Not exactly on the accent color scale */
	--color-shadow-dark: #00000080;
	--color-shadow-light: #2b2b2b3b;
	--color-placeholder-gray: #6a7282;
	/* Slate-gray for input placeholder text */
}

/* ****************************************
	* SEMANTIC COLOR ALIASES
	* 
	* Map raw colors to roles. Components reference these.
	* **************************************** */
:root {
	--color-primary: var(--color-primary-9);
	--color-gradient-end: var(--color-warm-sandy-gold);
	--color-text: var(--color-primary-12);
	--color-text-secondary: var(--color-primary-11);
	--color-text-extra-light: var(--color-primary-1);
	/* Note (nitpick) - ideally this would use the dark mode shade 11-12 of the primary color, but we don't have that yet */
	--color-text-light: var(--color-primary-5);
	--color-text-light-hover: var(--color-primary-4);
	/* Hover and focus: change to primary shade from accent shade as this generates the best contrast (otherwise eg color-accent-12 super close to color-primary-12 and thus links not visible). */
	--color-text-link: var(--color-accent-11);
	--color-text-link-hover: var(--color-primary-11);
	/* Muted text — de-emphasised content e.g. TOC sub-items */
	--color-text-muted: var(--color-neutral-10);

	/* Surfaces */
	--color-surface-extra-light: var(--color-neutral-1);
	--color-surface-light: var(--color-neutral-3);
	/* Note - using neutral-3 instead of neutral-2 (proposed Radix usage). TODO(feat): Consider adjusting in the future as the current "zebra" layout is not super modern with this low level of contrast */

	/* Accent */
	--color-accent: var(--color-accent-9);
	--color-accent-hover: var(--color-accent-10);
	/* Borders */
	--color-border-primary: var(--color-primary-8);
	--color-border-neutral: var(--color-neutral-7);
	/* Input placeholder text — slate-gray, distinct from the teal text-secondary */
	--color-text-placeholder: var(--color-placeholder-gray);
}

/* ****************************************
	* FOUNDATIONAL TOKENS
	* **************************************** */


/* ── Typography ─────────────────────────────────────────── */
:root {
	/* Font */
	/* Note - this is partially duplicate; best to also set correct font under Appearance -> Customize -> Global -> Typography to be sure the correct font is loaded */
	--font-title: "Helvetica", "Verdana", sans-serif;
	--font-text: "Helvetica", "Verdana", sans-serif;

	/* Weights */
	--weight-title: 700;
	--weight-heading: 700;
	--weight-body: 400;

	/* Line heights */
	--lineheight-tight: 1.15;
	--lineheight-body: 1.65;
	--lineheight-text-lg: 1.5;

	/* Letter spacing */
	--ls-title: -0.025em;

	/* Title scale */
	--title-page: clamp(2.25rem, 3.2vw + 1.1rem, 3.75rem);
	--title-section-display: clamp(1.875rem, 2.0vw + 1.0rem, 2.5rem);
	--title-section: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
	--title-subsection: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);

	/* Text scale */
	--text-base: clamp(0.95rem, 0.25vw + 0.9rem, 1.05rem);
	--text-lg: clamp(1.05rem, 0.6vw + 0.95rem, 1.25rem);
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;
	/* Only used for eyebrows in uppercase */
}

/* ── Spacing ─────────────────────────────────────────────── */
/* Adapting spacing from Tailwind */
:root {
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
}

/* ── Max-widths ─────────────────────────────────────────── */
:root {
	--max-w-prose: 65ch;
	/* readable text — hero desc */
	--max-w-xl: 576px;
	/* small content — highlights img */
	--max-w-4xl: 896px;
	/* narrow sections — CTA, feature list */
	--max-w-screen-xl: 1280px;
	/* content grid + topic strips */
	--max-w-screen-2xl: 1536px;
	/* full-bleed — hero inner */
}

/* ── Radius ─────────────────────────────────────────────── */
:root {
	--radius-md: 8px;
	--radius-lg: 16px;
	/* Being used for cards and similar */
	--radius-pill: 32px;
	/* Tailwind rounded-4xl; being used for buttons and similar */
}

/* ── Gradients ─────────────────────────────────────────────── */
:root {
	--gradient-upward: linear-gradient(60deg, var(--color-primary) 25%, var(--color-gradient-end));
	--gradient-downward: linear-gradient(135deg, var(--color-primary), var(--color-gradient-end));
}


/* ── Breakpoints ─────────────────────────────────────────── */
/*
 * CSS variables cannot be used inside @media queries.
 * Repeat literal values in each query; document them here as constants.
 *   --bp-mobile:  640px   (Tailwind sm)
 *   --bp-tablet:  768px   (Tailwind md)
 *   --bp-desktop: 1024px  (Tailwind lg)
 *
 * TODO(feat): Consider moving to preprocessor setup to allow breakpoint variables.
 */


/* ****************************************
 * COMPONENT TOKENS
 * **************************************** */

/* ── Card ────────────────────────────────────────────────── */
:root {
	--card-bg: var(--color-surface-extra-light);
	--card-border: var(--color-border-neutral);
	--card-radius: var(--radius-lg);
	--card-shadow: 0 6px 20px var(--color-shadow-light);
	--card-padding: clamp(var(--space-6), 6vw, var(--space-12)) clamp(var(--space-4), 8vw, var(--space-16));
}

/* ── Buttons ─────────────────────────────────────────────── */
:root {
	--button-font-size: var(--text-lg);
	--button-font-size-sm: var(--text-base);

	--btn-shadow-strong: 0 25px 50px -12px var(--color-shadow-dark);
	/* Tailwind shadow-2xl — dark bg */
	--btn-shadow-soft: 0 5px 55px 1px var(--color-shadow-light);
	/* custom glow — light bg */

	/* Button theme defaults */
	--button-primary-bg: var(--color-accent);
	--button-primary-text: var(--color-accent-contrast);
	--button-secondary-bg: var(--color-surface-extra-light);
	--button-secondary-text: var(--color-primary);
}