/* ============================================================
   Arco Global Solutions — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ---------- Webfonts (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — Brand
     Warm earthy palette. Terracotta sunrise + deep forest +
     bone-cream paper. Inspired by Colombian landscape without
     literal flag colors.
     ============================================================ */

  /* Brand primary — terracotta / sunrise (from current logo) */
  --terracotta-50:  #FDF3EB;
  --terracotta-100: #F9DDC5;
  --terracotta-200: #F4BE93;
  --terracotta-300: #EE9A5C;
  --terracotta-400: #E87A35;   /* primary accent */
  --terracotta-500: #D55F1E;
  --terracotta-600: #B14817;
  --terracotta-700: #8A3712;
  --terracotta-800: #5E260C;
  --terracotta-900: #361506;

  /* Brand secondary — forest (deep green, grounding) */
  --forest-50:  #EEF3EF;
  --forest-100: #D4E0D6;
  --forest-200: #A6BFA9;
  --forest-300: #769D7B;
  --forest-400: #4F7E55;
  --forest-500: #2F5F36;        /* secondary */
  --forest-600: #214827;
  --forest-700: #18361C;
  --forest-800: #102612;
  --forest-900: #081308;

  /* Brand tertiary — clay (a deep maroon-brown, from logo's dark stroke) */
  --clay-50:  #F6EFEC;
  --clay-100: #E5D2CB;
  --clay-200: #C9A599;
  --clay-300: #A87567;
  --clay-400: #864F40;
  --clay-500: #6B3A2D;
  --clay-600: #532B21;
  --clay-700: #3D1E18;
  --clay-800: #28130F;
  --clay-900: #150906;

  /* Sun — warm yellow accent (the lighter end of the logo gradient) */
  --sun-50:  #FEF7E6;
  --sun-100: #FBE9B4;
  --sun-200: #F8D779;
  --sun-300: #F4C03E;
  --sun-400: #EDA516;       /* sparingly: highlights, dots */
  --sun-500: #C8870A;

  /* ============================================================
     COLOR — Neutrals (warm-toned, not pure gray)
     Bone, paper, ink — warm grays so they sit next to terracotta
     without going cold or "tech".
     ============================================================ */
  --bone-50:  #FAF6EE;       /* page bg light */
  --bone-100: #F4EFE3;
  --bone-200: #E8E0CE;
  --bone-300: #D4C9B0;
  --bone-400: #B0A38A;
  --bone-500: #877A65;       /* muted text on dark */
  --bone-600: #5E5444;
  --bone-700: #3F3829;
  --bone-800: #261F14;
  --bone-900: #14100A;       /* deepest ink */

  /* True neutral (rare — for code, charts, system UI) */
  --gray-50:  #F7F7F6;
  --gray-100: #ECEBE8;
  --gray-200: #D8D6D0;
  --gray-300: #B5B2A9;
  --gray-400: #8A867C;
  --gray-500: #5E5B53;
  --gray-600: #403E38;
  --gray-700: #2A2925;
  --gray-800: #1A1916;

  /* ============================================================
     SEMANTIC COLORS
     Use these in components, not the raw palette.
     ============================================================ */

  /* Surfaces */
  --bg-page:        var(--bone-50);     /* default page */
  --bg-page-warm:   #F7F1E3;            /* warmer hero/section */
  --bg-elevated:    #FFFFFF;            /* cards, modals */
  --bg-sunken:      var(--bone-100);    /* inset wells */
  --bg-inverse:     var(--forest-700);  /* dark sections */
  --bg-inverse-deep:var(--bone-900);    /* footers, deepest */

  /* Foreground / text */
  --fg-primary:     var(--bone-900);    /* body, headlines */
  --fg-secondary:   var(--bone-700);    /* supporting text */
  --fg-muted:       var(--bone-500);    /* meta, captions */
  --fg-inverse:     var(--bone-50);     /* on dark surfaces */
  --fg-inverse-muted:var(--bone-300);
  --fg-on-accent:   #FFFFFF;            /* on terracotta */

  /* Brand accents */
  --accent:         var(--terracotta-500);   /* primary CTA */
  --accent-hover:   var(--terracotta-600);
  --accent-press:   var(--terracotta-700);
  --accent-soft:    var(--terracotta-100);
  --accent-tint:    var(--terracotta-50);

  --secondary:      var(--forest-500);
  --secondary-hover:var(--forest-600);
  --secondary-soft: var(--forest-100);

  /* Borders & dividers */
  --border-subtle:  rgba(20, 16, 10, 0.08);
  --border-default: rgba(20, 16, 10, 0.14);
  --border-strong:  rgba(20, 16, 10, 0.28);
  --border-on-dark: rgba(250, 246, 238, 0.12);

  /* Status (warm, not generic) */
  --success:  #2F5F36;   /* forest */
  --success-bg: #E6EDE6;
  --warning:  #C8870A;   /* sun-500 */
  --warning-bg: #FBE9B4;
  --danger:   #B14817;   /* terracotta-600 */
  --danger-bg: #F9DDC5;
  --info:     #5E5444;   /* bone — never blue */
  --info-bg:  var(--bone-100);

  /* ============================================================
     TYPE
     Display: Fraunces (warm humanist serif, optical sizing)
     Body:    DM Sans (geometric humanist, great Spanish coverage)
     Mono:    JetBrains Mono
     ============================================================ */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — fluid for hero sizes, fixed for UI */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;
  --text-7xl:  112px;

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ============================================================
     SPACING — 4px base scale
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADIUS — soft but not cartoonish
     ============================================================ */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — warm tinted (uses bone-900 base, not pure black)
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(20, 16, 10, 0.06);
  --shadow-sm:  0 2px 4px rgba(20, 16, 10, 0.06), 0 1px 2px rgba(20, 16, 10, 0.04);
  --shadow-md:  0 6px 16px -4px rgba(20, 16, 10, 0.10), 0 2px 4px rgba(20, 16, 10, 0.06);
  --shadow-lg:  0 16px 32px -8px rgba(20, 16, 10, 0.14), 0 4px 8px rgba(20, 16, 10, 0.06);
  --shadow-xl:  0 32px 64px -16px rgba(20, 16, 10, 0.20), 0 8px 16px rgba(20, 16, 10, 0.06);
  --shadow-inner: inset 0 1px 2px rgba(20, 16, 10, 0.08);

  /* Warm accent glow (used sparingly on focus/CTAs) */
  --ring-accent: 0 0 0 4px rgba(213, 95, 30, 0.20);
  --ring-focus:  0 0 0 3px rgba(47, 95, 54, 0.35);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --dur-page:   520ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use the class — don't hand-roll font + size + weight.
   ============================================================ */

.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm,
.t-h1, .t-h2, .t-h3, .t-h4,
.t-eyebrow, .t-quote {
  font-family: var(--font-display);
  color: var(--fg-primary);
  text-wrap: balance;
}

.t-display-xl {
  font-size: clamp(64px, 9vw, 112px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.t-display-lg {
  font-size: clamp(48px, 7vw, 84px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.t-display-md {
  font-size: clamp(36px, 5vw, 64px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-medium);
  font-variation-settings: "opsz" 96, "SOFT" 30;
}
.t-display-sm {
  font-size: clamp(28px, 4vw, 48px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-medium);
  font-variation-settings: "opsz" 72, "SOFT" 20;
}

.t-h1 { font-size: var(--text-4xl); line-height: var(--leading-snug); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.t-h2 { font-size: var(--text-3xl); line-height: var(--leading-snug); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.t-h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
.t-h4 { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--weight-semibold);
  color: var(--accent);
}

.t-quote {
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--fg-primary);
}

.t-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--fg-secondary);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--fg-primary);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--fg-secondary);
}
.t-meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

/* Base reset for any page that imports this */
html, body {
  font-family: var(--font-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}