/* ============================================================
   ServiaOS — Foundations: Colors & Type
   Editorial. Terroir. Calm density.
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
/* Display serif: Fraunces (soft/supersoft optical cut for warmth) */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces_72pt-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces_72pt-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces_72pt-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces_72pt-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces_72pt-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces_72pt-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces_72pt-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces_72pt-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
/* Soft cut — used for large display, feels less mechanical */
@font-face {
  font-family: "Fraunces Soft";
  src: url("../fonts/Fraunces_72pt_Soft-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces Soft";
  src: url("../fonts/Fraunces_72pt_Soft-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces Soft";
  src: url("../fonts/Fraunces_72pt_Soft-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces Soft";
  src: url("../fonts/Fraunces_72pt_Soft-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* UI sans: Inter Tight from Google Fonts via unpkg fallback.
   SUBSTITUTION NOTE: no sans was provided. We use Inter Tight
   (neutral, high legibility, open aperture) — please confirm or
   provide preferred sans (e.g. ABC Diatype, Söhne, Neue Haas). */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ------------------------------------------------------------
     COLOR — Penedès terroir palette
     One accent per screen. Everything else neutral.
     ------------------------------------------------------------ */

  /* Paper (cream) — primary surface. Sampled from logo background. */
  --paper:        #F8F8F3;   /* canvas */
  --paper-2:      #F1F0E8;   /* raised surface, hover on paper */
  --paper-3:      #E8E6DB;   /* pressed, dividers on paper */

  /* Ink (olive-black) — primary foreground. Sampled from logo wordmark. */
  --ink:          #404329;   /* body + primary text */
  --ink-2:        #595B44;   /* secondary text */
  --ink-3:        #8A8B77;   /* tertiary / captions */
  --ink-4:        #B8B8A8;   /* disabled / placeholder */
  --ink-line:     #D9D8CC;   /* hairlines on paper */

  /* Night — inverse surface (editorial dark pages, modals) */
  --night:        #1E2014;
  --night-2:      #2B2D1E;
  --night-3:      #3B3D2C;

  /* ---- Accents (use ONE per screen) ---- */
  /* Vinya — grape/aubergine, signature accent for primary actions */
  --vinya-50:     #F4EEF1;
  --vinya-100:   #E6D6DF;
  --vinya-300:    #B07898;
  --vinya-500:    #7A3F5F;   /* primary accent */
  --vinya-700:    #5A2B46;
  --vinya-900:    #3A1A2D;

  /* Oliva — olive/moss, secondary accent (info, confirmed reservations) */
  --oliva-50:     #EEF0E4;
  --oliva-100:   #DDE1C7;
  --oliva-300:    #9BA36E;
  --oliva-500:    #6B734A;
  --oliva-700:    #4C5232;

  /* Terra — clay/terracotta, warnings + editorial warmth */
  --terra-50:     #F7EEE6;
  --terra-100:   #EDD7C4;
  --terra-300:    #D39A74;
  --terra-500:    #B06A40;
  --terra-700:    #824829;

  /* Cel — dusty sky, info */
  --cel-50:       #ECEEEF;
  --cel-300:      #8B9FA8;
  --cel-500:      #5E7680;

  /* ---- Semantic ---- */
  --bg:           var(--paper);
  --bg-raised:    var(--paper-2);
  --bg-sunken:    var(--paper-3);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-subtle:    var(--ink-3);
  --fg-disabled:  var(--ink-4);
  --line:         var(--ink-line);
  --line-strong:  var(--ink-3);

  --accent:       var(--vinya-500);
  --accent-fg:    #FFFFFF;
  --accent-soft:  var(--vinya-50);

  --success:      var(--oliva-500);
  --success-soft: var(--oliva-50);
  --warning:      var(--terra-500);
  --warning-soft: var(--terra-50);
  --danger:       #9A2B1E;       /* muted brick, not cliché wine */
  --danger-soft:  #F4E4E1;
  --info:         var(--cel-500);
  --info-soft:    var(--cel-50);

  /* ------------------------------------------------------------
     TYPE
     Serif display (Fraunces), Sans UI (Inter Tight).
     Hierarchy by size + weight, never color.
     ------------------------------------------------------------ */
  --font-serif:   "Fraunces", "Fraunces Soft", Georgia, "Times New Roman", serif;
  --font-serif-soft: "Fraunces Soft", "Fraunces", Georgia, serif;
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — modest, mobile-first. Don't shout. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.14em;

  /* ------------------------------------------------------------
     SPACING — 4px base. Calm density.
     ------------------------------------------------------------ */
  --space-0:  0;
  --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;
  --space-10: 128px;

  /* ------------------------------------------------------------
     RADII — slight, editorial. Never pill unless intentional.
     ------------------------------------------------------------ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;   /* default for cards, inputs */
  --radius-lg: 14px;  /* larger surfaces */
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ------------------------------------------------------------
     ELEVATION — soft, low, warm (no bluish drop shadows).
     ------------------------------------------------------------ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(64,67,41,0.06), 0 1px 2px rgba(64,67,41,0.04);
  --shadow-2: 0 1px 0 rgba(64,67,41,0.05), 0 2px 8px -2px rgba(64,67,41,0.08);
  --shadow-3: 0 2px 1px rgba(64,67,41,0.04), 0 8px 24px -6px rgba(64,67,41,0.12);
  --shadow-4: 0 4px 2px rgba(64,67,41,0.04), 0 24px 48px -12px rgba(64,67,41,0.18);
  --shadow-inset: inset 0 1px 0 rgba(64,67,41,0.04);

  /* Focus ring — accent, not blue. */
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);

  /* ------------------------------------------------------------
     MOTION — minimal. Acknowledge only.
     ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:cubic-bezier(0.45, 0.05, 0.35, 1);
  --dur-1: 120ms;  /* press */
  --dur-2: 200ms;  /* hover */
  --dur-3: 320ms;  /* panel */

  /* Layout */
  --content-max: 1120px;   /* editorial comfort */
  --content-read: 680px;   /* prose width */
  --touch-min: 44px;       /* never less */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these; don't roll your own.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.t-display-xl, h1.display {
  font-family: var(--font-serif-soft);
  font-size: clamp(var(--fs-3xl), 8vw, var(--fs-5xl));
  font-weight: 400;        /* serif display is regular or light, never bold */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.t-display, h1 {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-2xl), 6vw, var(--fs-4xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.t-h1, h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  text-wrap: balance;
}

.t-h2, h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.t-h3, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.t-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.t-caption, small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}

.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
}

.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--fg-muted);
}

.t-pullquote {
  font-family: var(--font-serif-soft);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* Base reset-ish */
html { color: var(--fg); background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--fg); }