/* Paviportas — Webfonts
   Display: "Jost" — geometric/Futura-like, architectural; mirrors the round
            geometry of the Paviportas wordmark.
   Text/UI: "Hanken Grotesk" — humanist grotesque, warm and highly legible.
   NOTE: the original wordmark uses a custom geometric face; Jost is the
   nearest Google Fonts match (substitution flagged to the brand owner). */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
/* ============================================================
   Paviportas — Color tokens
   Warm, premium, architectural. Signature honey-amber (#ffcf5b)
   against warm charcoal ink and a linen/oat neutral field.
   ============================================================ */
:root {
  /* ---- Brand: Amber / Honey (the signature) ---- */
  --amber-50:  #fffaef;
  --amber-100: #fff2d2;
  --amber-200: #ffe3a1;
  --amber-300: #ffd778;
  --amber-400: #ffcf5b;   /* ← brand primary */
  --amber-500: #f3bd3c;
  --amber-600: #d99e1f;   /* deeper honey — links/accents on light */
  --amber-700: #a8770f;
  --amber-800: #7c5708;

  /* ---- Ink: warm near-black (logo frame) ---- */
  --ink-950: #16130f;
  --ink-900: #1c1815;     /* primary text */
  --ink-800: #2a241f;
  --ink-700: #3d362e;
  --ink-600: #524a40;

  /* ---- Neutral: warm linen / oat / stone ---- */
  --stone-50:  #faf8f3;   /* paper / page field */
  --stone-100: #f3efe7;
  --stone-150: #ece6db;
  --stone-200: #e4ddd0;
  --stone-300: #d3cabb;
  --stone-400: #b4aa99;
  --stone-500: #8b8273;
  --stone-600: #6b6357;
  --stone-700: #4d473e;

  --white: #ffffff;

  /* ---- Wood accent (warm fills, rarely) ---- */
  --wood-oak:  #d8a866;
  --wood-warm: #c0894a;

  /* ---- Status (warm-aligned, muted) ---- */
  --success: #5a7d52;
  --success-bg: #eef2e6;
  --warning: #c8881a;
  --warning-bg: #fdf2da;
  --danger:  #b14430;
  --danger-bg: #f8e7e1;
  --info:    #5e6f7e;
  --info-bg: #eaeef1;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --bg:              var(--stone-50);
  --bg-sunken:       var(--stone-100);
  --surface:         var(--white);
  --surface-raised:  var(--white);
  --surface-inverse: var(--ink-900);
  --surface-amber:   var(--amber-400);

  --text:            var(--ink-900);
  --text-muted:      var(--stone-600);
  --text-subtle:     var(--stone-500);
  --text-inverse:    var(--stone-50);
  --text-on-amber:   var(--ink-900);

  --border:          var(--stone-200);
  --border-strong:   var(--stone-300);
  --border-inverse:  rgba(255,255,255,0.14);

  --accent:          var(--amber-400);
  --accent-hover:    var(--amber-500);
  --accent-press:    var(--amber-600);
  --accent-text:     var(--amber-700);   /* amber text legible on light */
  --accent-quiet:    var(--amber-100);

  --focus-ring:      var(--amber-600);
  --overlay:         rgba(22,19,15,0.46);
}
/* ============================================================
   Paviportas — Typography tokens
   Display: Jost (geometric). Text/UI: Hanken Grotesk.
   ============================================================ */
:root {
  --font-display: 'Jost', 'Hanken Grotesk', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Type scale — generous, architectural rhythm */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base:1rem;       /* 16 */
  --text-md:  1.125rem;   /* 18 */
  --text-lg:  1.375rem;   /* 22 */
  --text-xl:  1.75rem;    /* 28 */
  --text-2xl: 2.25rem;    /* 36 */
  --text-3xl: 3rem;       /* 48 */
  --text-4xl: 4rem;       /* 64 */
  --text-5xl: 5.5rem;     /* 88 */
  --text-6xl: 7.5rem;     /* 120 */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-eyebrow: 0.22em;  /* uppercase Jost eyebrows */
}
/* ============================================================
   Paviportas — Spacing, radii, shadow, motion, layout
   Calm, airy, restrained. 4px base grid.
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radii — restrained, architectural. Pills for actions/chips. */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows — soft, warm-tinted, low-contrast */
  --shadow-xs: 0 1px 2px rgba(28,24,21,0.05);
  --shadow-sm: 0 2px 6px -1px rgba(28,24,21,0.07);
  --shadow-md: 0 8px 24px -8px rgba(28,24,21,0.12);
  --shadow-lg: 0 20px 50px -16px rgba(28,24,21,0.18);
  --shadow-amber: 0 12px 30px -10px rgba(217,158,31,0.45);

  /* Motion — calm ease-out, no bounce */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur: 240ms;       /* @kind other */
  --dur-slow: 420ms;  /* @kind other */

  /* Layout */
  --container: 1240px;       /* @kind spacing */
  --container-wide: 1480px;  /* @kind spacing */
  --gutter: clamp(1.25rem, 5vw, 4rem); /* @kind spacing */

  /* Z-index */
  --z-base: 1;      /* @kind other */
  --z-sticky: 50;   /* @kind other */
  --z-overlay: 100; /* @kind other */
  --z-modal: 200;   /* @kind other */
  --z-toast: 300;   /* @kind other */
}