/* =============================================================
   RIMAR Design System — colors & type tokens
   Single source of truth for CSS custom properties.
   Import on every page:  <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================= */

/* Fonts — Google Fonts substitutes. Replace with licensed RIMAR faces when available. */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@700;800;900&family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -----------------------------------------------------------
     1. Brand color
     ----------------------------------------------------------- */
  --brand-orange:        #E9521C;   /* sampled from logo chevrons */
  --brand-orange-hover:  #D04612;   /* 5% darker — button hover   */
  --brand-orange-press:  #B83C0F;   /* press state                */
  --brand-orange-soft:   #FDE8DC;   /* 12% tint on paper          */
  --brand-orange-ink:    #2A0F04;   /* darkest tint, for text on  */

  /* -----------------------------------------------------------
     2. Neutrals — warm scale (paper → ink)
     ----------------------------------------------------------- */
  --paper:       #FAF6EE;   /* primary light surface */
  --ink:         #141210;   /* primary dark surface  */

  --neutral-50:  #FAF6EE;
  --neutral-100: #F2ECE0;
  --neutral-200: #E6DFD0;
  --neutral-300: #D2C9B7;
  --neutral-400: #A89F8C;
  --neutral-500: #6E6759;
  --neutral-600: #4A453B;
  --neutral-700: #2E2A23;
  --neutral-800: #1F1C17;
  --neutral-900: #141210;

  /* -----------------------------------------------------------
     3. Semantic colors
     ----------------------------------------------------------- */
  --success:     #5C7A2E;   /* olive */
  --success-bg:  #ECEFD9;
  --warning:     #C48B14;   /* mustard */
  --warning-bg:  #FAEECF;
  --danger:      #A8321A;   /* brick (deeper than brand so they don't collide) */
  --danger-bg:   #F7D8CF;
  --info:        #2E5E6B;   /* deep teal, used sparingly */
  --info-bg:     #D7E6E9;

  /* -----------------------------------------------------------
     4. Semantic roles — light mode (default)
     ----------------------------------------------------------- */
  --surface:           var(--paper);
  --surface-raised:    #FFFFFF;
  --surface-sunk:      var(--neutral-100);
  --surface-inverse:   var(--ink);

  --fg-1:              var(--neutral-900);    /* primary text     */
  --fg-2:              var(--neutral-700);    /* secondary text   */
  --fg-3:              var(--neutral-500);    /* muted / metadata */
  --fg-4:              var(--neutral-400);    /* placeholder      */
  --fg-on-brand:       #FFFFFF;
  --fg-on-inverse:     var(--paper);

  --border:            var(--neutral-200);
  --border-strong:     var(--neutral-300);
  --border-inverse:    var(--neutral-700);

  --link:              var(--brand-orange);
  --link-hover:        var(--brand-orange-hover);
  --focus-ring:        var(--brand-orange);

  /* -----------------------------------------------------------
     5. Type — families
     ----------------------------------------------------------- */
  --font-display: 'Saira Condensed', 'Archivo', 'Helvetica Neue', sans-serif;
  --font-head:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* -----------------------------------------------------------
     6. Type — scale (px-equivalent, uses rem)
     ----------------------------------------------------------- */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  3rem;       /* 48 */
  --fs-5xl:  4rem;       /* 64 */
  --fs-6xl:  5.5rem;     /* 88 */
  --fs-7xl:  7.5rem;     /* 120 */

  --lh-tight:   1.02;
  --lh-heading: 1.12;
  --lh-snug:    1.25;
  --lh-body:    1.5;
  --lh-prose:   1.6;

  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-loose:   0.04em;
  --tr-caps:    0.08em;

  /* -----------------------------------------------------------
     7. Spacing — 4/8-pt grid
     ----------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* -----------------------------------------------------------
     8. Radii — tight, architectural
     ----------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;

  /* -----------------------------------------------------------
     9. Shadows — understated
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 0 rgba(20,18,16,0.06);
  --shadow-sm: 0 2px 8px -2px rgba(20,18,16,0.08);
  --shadow-md: 0 8px 24px -8px rgba(20,18,16,0.14);
  --shadow-lg: 0 24px 60px -20px rgba(20,18,16,0.22);

  /* -----------------------------------------------------------
     10. Motion
     ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 0.4);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1:      120ms;
  --dur-2:      200ms;
  --dur-3:      320ms;
  --dur-4:      480ms;

  /* Layout */
  --content-max: 1320px;
  --prose-max:   680px;
}

/* Dark surface override — apply [data-theme="ink"] on a section or the <html> element */
[data-theme="ink"] {
  --surface:         var(--ink);
  --surface-raised:  var(--neutral-800);
  --surface-sunk:    #0C0A08;
  --surface-inverse: var(--paper);

  --fg-1: var(--paper);
  --fg-2: var(--neutral-300);
  --fg-3: var(--neutral-400);
  --fg-4: var(--neutral-500);
  --fg-on-inverse: var(--neutral-900);

  --border:         var(--neutral-700);
  --border-strong:  var(--neutral-600);

  --link:       var(--brand-orange);
  --link-hover: #F47339;
}

/* ==============================================================
   Base styles & semantic element tokens
   ============================================================== */
html { background: var(--surface); color: var(--fg-1); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — editorial rhythm */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-7xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}
h1, .h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: var(--fs-5xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
  margin: 0 0 var(--sp-5);
}
h2, .h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
  margin: 0 0 var(--sp-4);
}
h3, .h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}
h4, .h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

/* Eyebrow / section marker — uppercase with a chevron lead */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--brand-orange);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before { content: "»"; font-weight: 900; }

/* Body paragraphs */
p { margin: 0 0 var(--sp-4); color: var(--fg-1); }
.prose {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
  max-width: var(--prose-max);
}
.prose p { margin: 0 0 var(--sp-5); }

/* Links */
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }

/* Code / tabular */
code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Small utilities */
.caps { text-transform: uppercase; letter-spacing: var(--tr-caps); }
.muted { color: var(--fg-3); }
.chev { color: var(--brand-orange); font-weight: 900; }