/*
 * Latina Network — main.css
 * Phase 01: design token layer only.
 * Component and layout styles are added in later phases.
 * ─────────────────────────────────────────────────────
 * Edit discipline: do not add component rules to this file.
 * Component stylesheets in css/ import these tokens via cascade.
 */

/* =========================================================
   1. COLOR TOKENS
   ========================================================= */
:root {
	/* Core palette */
	--ln-tierra:        #C4622D;
	--ln-oro:           #D4A853;
	--ln-piel-profunda: #5C2D4E;
	--ln-crema:         #F5EDD8;
	--ln-agua-viva:     #1CA9A0;
	--ln-plum-dark:     #3D1D34;
	--ln-tierra-light:  #E8845A;

	/* Semantic aliases — component code references these,
	   not the raw palette, so a future rebrand touches one place. */
	--ln-color-primary:    var(--ln-tierra);
	--ln-color-secondary:  var(--ln-piel-profunda);
	--ln-color-accent:     var(--ln-oro);
	--ln-color-highlight:  var(--ln-agua-viva);
	--ln-color-surface:    var(--ln-crema);
	--ln-color-deep:       var(--ln-plum-dark);
	--ln-color-primary-lt: var(--ln-tierra-light);

	/* Gradient band: Tierra → Oro → Agua Viva */
	--ln-gradient-band: linear-gradient(
		135deg,
		var(--ln-tierra)     0%,
		var(--ln-oro)        50%,
		var(--ln-agua-viva)  100%
	);

	/* Text on dark surfaces */
	--ln-color-text-on-dark:   #FFFFFF;
	/* Text on light surfaces */
	--ln-color-text-on-light:  var(--ln-plum-dark);
	/* Muted / secondary text */
	--ln-color-text-muted:     #6B5B6E;
	/* Border / divider */
	--ln-color-border:         rgba(92, 45, 78, 0.18);
}


/* =========================================================
   2. TYPOGRAPHY TOKENS
   ========================================================= */
:root {
	/* Font families */
	--ln-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--ln-font-body:    'Outfit', system-ui, -apple-system, sans-serif;

	/* Type scale — fluid where helpful, fixed where precision matters.
	   Named by role so components stay decoupled from raw sizes. */
	--ln-text-xs:   0.75rem;     /*  12px — labels, fine print        */
	--ln-text-sm:   0.875rem;    /*  14px — captions, meta            */
	--ln-text-base: 1rem;        /*  16px — body copy                 */
	--ln-text-md:   1.125rem;    /*  18px — large body / lead         */
	--ln-text-lg:   1.375rem;    /*  22px — subheads, card titles     */
	--ln-text-xl:   1.75rem;     /*  28px — section headings (h3)     */
	--ln-text-2xl:  2.25rem;     /*  36px — page headings (h2)        */
	--ln-text-3xl:  3rem;        /*  48px — display headings (h1)     */
	--ln-text-4xl:  3.75rem;     /*  60px — hero / marquee            */
	--ln-text-5xl:  clamp(3rem, 6vw, 5rem); /* fluid hero override   */

	/* Line heights */
	--ln-leading-tight:  1.15;
	--ln-leading-snug:   1.3;
	--ln-leading-normal: 1.6;
	--ln-leading-loose:  1.8;

	/* Letter spacing */
	--ln-tracking-tight:  -0.02em;
	--ln-tracking-normal:  0em;
	--ln-tracking-wide:    0.04em;
	--ln-tracking-wider:   0.08em;
	--ln-tracking-widest:  0.15em;   /* all-caps labels */

	/* Font weights */
	--ln-weight-light:    300;
	--ln-weight-regular:  400;
	--ln-weight-medium:   500;
	--ln-weight-semibold: 600;
	--ln-weight-bold:     700;
}


/* =========================================================
   3. SPACING & LAYOUT TOKENS
   Phase 01 stubs — components fill these in later phases.
   ========================================================= */
:root {
	--ln-space-1:  0.25rem;   /*  4px */
	--ln-space-2:  0.5rem;    /*  8px */
	--ln-space-3:  0.75rem;   /* 12px */
	--ln-space-4:  1rem;      /* 16px */
	--ln-space-5:  1.5rem;    /* 24px */
	--ln-space-6:  2rem;      /* 32px */
	--ln-space-8:  3rem;      /* 48px */
	--ln-space-10: 4rem;      /* 64px */
	--ln-space-12: 6rem;      /* 96px */

	--ln-radius-sm:   4px;
	--ln-radius-md:   8px;
	--ln-radius-lg:  16px;
	--ln-radius-pill: 999px;

	--ln-max-width-content: 75rem;   /* 1200px — main content container */
	--ln-max-width-prose:   42rem;   /* comfortable reading column       */
}


/* =========================================================
   4. BASE RESETS — token application only
   Intentionally minimal: establishes font inheritance and
   ensures tokens are visible in the cascade. No layout rules.
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;   /* respect user browser preference */
}

body {
	font-family:  var(--ln-font-body);
	font-size:    var(--ln-text-base);
	font-weight:  var(--ln-weight-regular);
	line-height:  var(--ln-leading-normal);
	color:        var(--ln-color-text-on-light);
	background-color: var(--ln-crema);
}

h1, h2, h3, h4, h5, h6 {
	font-family:  var(--ln-font-display);
	font-weight:  var(--ln-weight-medium);
	line-height:  var(--ln-leading-tight);
	color:        var(--ln-color-deep);
}

h1 { font-size: var(--ln-text-3xl); letter-spacing: var(--ln-tracking-tight); }
h2 { font-size: var(--ln-text-2xl); }
h3 { font-size: var(--ln-text-xl);  }
h4 { font-size: var(--ln-text-lg);  }
h5 { font-size: var(--ln-text-md);  font-family: var(--ln-font-body); font-weight: var(--ln-weight-semibold); }
h6 { font-size: var(--ln-text-base); font-family: var(--ln-font-body); font-weight: var(--ln-weight-semibold); letter-spacing: var(--ln-tracking-widest); text-transform: uppercase; }

a {
	color: var(--ln-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	color: var(--ln-tierra-light);
}