/* Turni Brasil — Colors & Type · v3.0 (rebrand Topdoer → Turni)
   Mono-teal brand system + neutrals. Status colors decoupled from brand:
   success/PIX = Green, warning = Amber, error = Red, neutral = Navy/grey.
   Type: Clash Display (display) + Hanken Grotesk (UI) — full PT-BR diacritics. */


/* ===== Self-hosted fonts — replaces fontshare + Google @import render-blocking chain ===== */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/hanken-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/hanken-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/hanken-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/hanken-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Clash Display — self-hosted from Fontshare desktop kit (import/ClashDisplay_Complete) */
@font-face{font-family:'Clash Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/clash-400.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/clash-500.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/clash-600.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/clash-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  /* ---- Brand teal — primary action & brand (teal/600 #2E9688 = the logo) ---- */
  --td-teal-900: #134E45;
  --td-teal-800: #1B6B5E;
  --td-teal-700: #267F70;
  --td-teal-600: #2E9688;   /* ★ BRAND — every primary CTA, every brand fill */
  --td-teal-500: #3DBFA9;
  --td-teal-400: #5CDBD3;   /* mint — light fills, hover tints */
  --td-teal-300: #87E8DE;
  --td-teal-200: #B5F5EC;
  --td-teal-100: #D6FFEE;
  --td-teal-50:  #EDFFF9;

  /* ---- Green — PIX / success status (decoupled from brand teal) ---- */
  --td-green-900: #0B5A2B;
  --td-green-700: #157F3C;
  --td-green-600: #1FA34F;   /* success / Pago via PIX / Aceita */
  --td-green-500: #34C56B;
  --td-green-400: #5FD98A;
  --td-green-200: #BBEFCB;
  --td-green-100: #DEF7E6;
  --td-green-50:  #EFFBF3;

  /* ---- Amber — warning / pending (Aguardando NF, Aguardando ação) ---- */
  --td-amber-700: #B5740B;
  --td-amber-600: #F59E0B;
  --td-amber-500: #FBBF24;
  --td-amber-200: #FCE7A8;
  --td-amber-100: #FEF3C7;
  --td-amber-50:  #FFFBEB;

  /* ---- Red — error (Rejeitado, PIX falhou, Bloqueado) ---- */
  --td-red-700: #C0322B;
  --td-red-600: #F0453F;
  --td-red-500: #F8857F;
  --td-red-200: #FBD0CE;
  --td-red-100: #FDE8E7;
  --td-red-50:  #FEF4F3;

  /* ---- Navy — neutral status (Cancelado, Rascunho) ---- */
  --td-navy-700: #2B3A4F;
  --td-navy-500: #5A6B82;
  --td-navy-200: #D2DAE4;
  --td-navy-100: #E9EEF3;

  /* ---- Periwinkle / blue — SERVICE ONLY: links + neutral info. Never a CTA. ---- */
  --td-blue-700: #2C4F9D;
  --td-blue-600: #3B6FD4;
  --td-blue-500: #648BD8;
  --td-blue-400: #ADC6FF;
  --td-blue-300: #E4EBF7;
  --td-blue-100: #EAF1FE;
  --td-blue-50:  #F3F7FF;

  /* ---- Neutrals — cool grey ramp; ink/900 ≈ #14181B (the logo's near-black) ---- */
  --td-ink-900: #14181B;     /* primary text */
  --td-ink-700: #475059;     /* secondary text */
  --td-ink-500: #7C8893;     /* muted text */
  --td-ink-300: #A4AEB8;     /* placeholder / disabled text */
  --td-ink-100: #E4E8EC;

  --td-gray-900: #14181B;
  --td-gray-800: #232A30;
  --td-gray-700: #3A434C;
  --td-gray-600: #586471;
  --td-gray-500: #7C8893;
  --td-gray-400: #A4AEB8;
  --td-gray-300: #CDD4DA;    /* default border */
  --td-gray-200: #E4E8EC;    /* muted border */
  --td-gray-100: #F1F4F6;    /* inset */
  --td-gray-50:  #F7F9FA;    /* muted surface */
  --td-gray-25:  #FBFCFC;
  --td-white:    #FFFFFF;
  --td-canvas:   #F2F5F6;    /* page */

  /* ---- Legacy semantic aliases (kept so existing cards/kits don't break) ---- */
  --td-success-600: var(--td-green-600);
  --td-success-500: var(--td-green-500);
  --td-success-100: var(--td-green-100);
  --td-warning-600: var(--td-amber-600);
  --td-warning-500: var(--td-amber-500);
  --td-warning-100: var(--td-amber-100);
  --td-error-700:   var(--td-red-700);
  --td-error-600:   var(--td-red-600);
  --td-error-500:   var(--td-red-500);
  --td-error-100:   var(--td-red-100);
  --td-info-600:    var(--td-blue-600);
  --td-info-500:    var(--td-blue-500);
  --td-info-100:    var(--td-blue-100);

  /* ---- Semantic surface / text / border ---- */
  --bg-page:        var(--td-canvas);
  --bg-surface:     var(--td-white);
  --bg-muted:       var(--td-gray-50);
  --bg-inset:       var(--td-gray-100);
  --bg-overlay:     rgba(12, 18, 22, 0.48);

  --fg-default:     var(--td-ink-900);
  --fg-secondary:   var(--td-ink-700);
  --fg-muted:       var(--td-ink-500);
  --fg-placeholder: var(--td-ink-300);
  --fg-inverse:     var(--td-white);
  --fg-brand:       var(--td-teal-600);
  --fg-action:      var(--td-teal-600);
  --fg-link:        var(--td-blue-600);
  --fg-success:     var(--td-green-600);
  --fg-warning:     var(--td-amber-700);
  --fg-danger:      var(--td-red-600);

  --border-default: var(--td-gray-300);
  --border-muted:   var(--td-gray-200);
  --border-strong:  var(--td-gray-400);
  --border-focus:   var(--td-teal-500);

  --accent-primary: var(--td-teal-600);
  --accent-mint:    var(--td-teal-400);

  /* ---- Typography ----
     Display: Clash Display (Fontshare) — expressive grotesk, NOT the logo wordmark.
     UI/body: Hanken Grotesk — humanist, highly legible, full PT-BR diacritics.
     Both gracefully fall back to each other if a CDN is blocked. */
  --font-display: 'Clash Display', 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    var(--font-sans);
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Display ramp */
  --fs-display: 64px;
  --lh-display: 1.0;       /* @kind font */
  --fw-display: 600;       /* @kind font */
  --ls-display: -0.025em;
  --fs-hero: 48px;
  --lh-hero: 1.04;         /* @kind font */
  --fw-hero: 600;          /* @kind font */
  --ls-hero: -0.02em;

  /* Headers — Clash Display, confident weights */
  --fs-h1: 34px; --lh-h1: 40px;
  --fw-h1: 600;            /* @kind font */
  --ls-h1: -0.018em;
  --fs-h2: 26px; --lh-h2: 32px;
  --fw-h2: 600;            /* @kind font */
  --ls-h2: -0.014em;
  --fs-h3: 20px; --lh-h3: 26px;
  --fw-h3: 600;            /* @kind font */
  --ls-h3: -0.01em;
  --fs-h4: 14px; --lh-h4: 20px;
  --fw-h4: 700;            /* @kind font */
  --ls-h4: 0.02em;

  /* Body — Hanken Grotesk */
  --fs-b1: 16px; --lh-b1: 24px; --fw-b1: 400;   /* @kind font */
  --fs-b2: 14px; --lh-b2: 22px; --fw-b2: 500;   /* @kind font */
  --fs-b3: 14px; --lh-b3: 22px; --fw-b3: 400;   /* @kind font */
  --fs-b4: 12px; --lh-b4: 18px; --fw-b4: 500;   /* @kind font */

  /* Spacing — 4px base */
  --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;

  /* Radii — rounder than v2 for a friendlier, livelier feel */
  --radius-xs: 4px;
  --radius-sm: 8px;     /* chips, small controls */
  --radius-md: 10px;    /* ★ buttons, inputs */
  --radius-lg: 14px;    /* inner cards, fields */
  --radius-xl: 18px;    /* nested cards */
  --radius-2xl: 24px;   /* ★ surface cards */
  --radius-3xl: 28px;   /* mobile hero cards */
  --radius-pill: 999px;

  /* Shadows — soft, layered; plus a teal-tinted CTA glow for the mobile register */
  --shadow-xs: 0 1px 2px 0 rgba(20,24,27,0.05);
  --shadow-sm: 0 2px 6px -1px rgba(20,24,27,0.08), 0 1px 2px 0 rgba(20,24,27,0.05);
  --shadow-md: 0 8px 20px -6px rgba(20,24,27,0.12), 0 2px 6px -2px rgba(20,24,27,0.07);
  --shadow-lg: 0 18px 40px -10px rgba(20,24,27,0.18), 0 6px 14px -8px rgba(20,24,27,0.10);
  --shadow-cta:   0 8px 18px -6px rgba(46,150,136,0.50);   /* teal glow — mobile primary */
  --shadow-green: 0 8px 18px -6px rgba(31,163,79,0.45);    /* success pop */
  --shadow-focus: 0 0 0 3px rgba(46,150,136,0.22);

  /* Motion — micro-interactions / "dopamine" */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */
  --duration-fast: 120ms;   /* @kind other */
  --duration-med:  200ms;   /* @kind other */
  --duration-slow: 360ms;   /* @kind other */
}

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-b3);
  line-height: var(--lh-b3);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display + headers — Clash Display */
.td-display { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--td-ink-900); }
.td-hero    { font-family: var(--font-display); font-weight: var(--fw-hero); font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); color: var(--td-ink-900); }
.td-h1 { font-family: var(--font-display); font-weight: var(--fw-h1); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--td-ink-900); }
.td-h2 { font-family: var(--font-display); font-weight: var(--fw-h2); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--td-ink-900); }
.td-h3 { font-family: var(--font-display); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--td-ink-900); }

/* H4 = uppercase eyebrow/label — Hanken for crisp small caps */
.td-h4 { font-family: var(--font-sans); font-weight: var(--fw-h4); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); text-transform: uppercase; color: var(--td-ink-500); }

/* Body — Hanken Grotesk */
.td-b1 { font-family: var(--font-body); font-weight: var(--fw-b1); font-size: var(--fs-b1); line-height: var(--lh-b1); color: var(--td-ink-900); }
.td-b2 { font-family: var(--font-body); font-weight: var(--fw-b2); font-size: var(--fs-b2); line-height: var(--lh-b2); color: var(--td-ink-900); }
.td-b3 { font-family: var(--font-body); font-weight: var(--fw-b3); font-size: var(--fs-b3); line-height: var(--lh-b3); color: var(--td-ink-900); }
.td-b4 { font-family: var(--font-body); font-weight: var(--fw-b4); font-size: var(--fs-b4); line-height: var(--lh-b4); color: var(--td-ink-700); }

/* Hero number — contractor app earnings, stat tiles. Clash + tabular. */
.td-num { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--td-ink-900); }

.td-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.td-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }