/* ============================================================
   YASME PINTA — Colors & Type tokens
   "Color, textura e historia firmados a mano."
   ============================================================ */

/* --- Webfonts ------------------------------------------------ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
}

@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Lato-Thin.ttf')      format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Lato-ThinItalic.ttf')format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Lato-Light.ttf')     format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Lato-LightItalic.ttf')format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Lato-Regular.ttf')   format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Lato-Italic.ttf')    format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Lato-Bold.ttf')      format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Lato-BoldItalic.ttf')format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Lato-Black.ttf')     format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Lato-BlackItalic.ttf')format('truetype'); }

:root {
  /* ------ Core palette ----------------------------------------- */
  --cream:        #E7DDC4;   /* Canvas Cream — default surface */
  --cream-2:      #EFE7D2;   /* lifted card surface           */
  --cream-3:      #DBCFB1;   /* sunken / hairline             */
  --blue:         #062A38;   /* Deep Studio Blue — structure  */
  --blue-2:       #0E3D52;   /* hover, raised blue            */
  --ink:          #18151A;   /* Ink Charcoal — text           */
  --ink-2:        #3A3539;   /* muted text                    */
  --ink-3:        #6A6063;   /* meta text                     */
  --gold:         #C8A73F;   /* Painter's Gold — accents      */
  --turquoise:    #2C9FBA;   /* Bright Turquoise              */
  --ochre:        #C99224;   /* Warm Ochre                    */

  /* ------ Secondary palette (limited use) ---------------------- */
  --scarlet:      #9D1D2A;
  --leaf:         #2F8A46;
  --ocean:        #155A96;
  --clay:         #6A3E28;
  --pale-yellow:  #E5C96B;
  --sage:         #A8AE8F;

  /* ------ Semantic surfaces ------------------------------------ */
  --surface:           var(--cream);
  --surface-raised:    var(--cream-2);
  --surface-sunken:    var(--cream-3);
  --surface-inverse:   var(--blue);

  --fg:                var(--ink);
  --fg-muted:          var(--ink-2);
  --fg-meta:           var(--ink-3);
  --fg-inverse:        var(--cream);

  --border:            color-mix(in oklab, var(--ink) 22%, transparent);
  --border-strong:     color-mix(in oklab, var(--ink) 60%, transparent);
  --border-blue:       var(--blue);
  --hairline-gold:     var(--gold);

  /* ------ Type families ---------------------------------------- */
  --font-display:   'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:      'Lato', 'Helvetica Neue', system-ui, sans-serif;

  /* ------ Type scale (px) -------------------------------------- */
  --fs-hero:    clamp(48px, 6vw, 76px);
  --fs-h1:      clamp(40px, 4.5vw, 56px);
  --fs-h2:      clamp(28px, 3vw, 36px);
  --fs-h3:      22px;
  --fs-body-l:  18px;
  --fs-body:    16px;
  --fs-body-s:  14px;
  --fs-label:   12px;
  --fs-button:  14px;

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.75;

  --tracking-tight:  -0.01em;
  --tracking-snug:   -0.005em;
  --tracking-normal: 0;
  --tracking-label:  0.12em;   /* tags, eyebrows */
  --tracking-pinta:  0.34em;   /* PINTA wordmark */
  --tracking-button: 0.04em;

  /* ------ Spacing scale --------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ------ Radii (kept restrained — painted, not soft) --------- */
  --radius-0: 0;
  --radius-1: 2px;     /* hairline tags */
  --radius-2: 4px;     /* buttons, inputs (the brand default) */
  --radius-3: 8px;     /* cards */
  --radius-pill: 999px;

  /* ------ Borders --------------------------------------------- */
  --border-thin:   1px solid var(--border);
  --border-card:   1px solid var(--border-strong);
  --border-cta:    1.5px solid var(--blue);
  --border-gold:   1px solid var(--gold);

  /* ------ Shadows (warm, not gray) ---------------------------- */
  --shadow-sm:  0 1px 2px rgba(24, 21, 26, 0.06),
                0 1px 1px rgba(24, 21, 26, 0.04);
  --shadow-md:  0 6px 18px -8px rgba(24, 21, 26, 0.18),
                0 2px 4px rgba(24, 21, 26, 0.06);
  --shadow-lg:  0 18px 40px -16px rgba(6, 42, 56, 0.28),
                0 4px 12px rgba(24, 21, 26, 0.08);

  /* ------ Texture URLs (use as background-image) -------------- */
  --tx-canvas:        url('assets/textures/paper-grain.png');
  --tx-blue-brush:    url('assets/textures/blue-brush-01.png');
  --tx-gold-stroke:   url('assets/textures/gold-stroke-01.png');
  --tx-multicolor:    url('assets/textures/multicolor-01.png');

  /* ------ Motion --------------------------------------------- */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-painterly: cubic-bezier(0.32, 0.04, 0.18, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;
}

/* ============================================================
   Base reset + canvas surface
   ============================================================ */

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

html, body {
  margin: 0;
  background-color: var(--cream);
  background-image: var(--tx-canvas);
  background-size: 300px 300px;
  background-blend-mode: multiply;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type — drop these as classes or element selectors
   ============================================================ */

.yp-hero,
h1.yp-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h1, .yp-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 120;
  margin: 0 0 var(--space-5);
  color: var(--fg);
  text-wrap: balance;
}

h2, .yp-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-variation-settings: "opsz" 72;
  margin: 0 0 var(--space-4);
  color: var(--fg);
  text-wrap: balance;
}

h3, .yp-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  margin: 0 0 var(--space-3);
  color: var(--fg);
}

p, .yp-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.yp-body-l {
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
}

.yp-body-s,
small {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--fg-meta);
}

.yp-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.yp-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ochre);
}

.yp-pinta {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-pinta);
  color: currentColor;
}

/* ============================================================
   Links + selection
   ============================================================ */

a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--gold), var(--gold));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-painterly);
}
a:hover { background-size: 100% 1.5px; }

::selection {
  background: var(--gold);
  color: var(--ink);
}