/* Consolidated FoodTouch production CSS
   - fonts.css (imports)
   - tokens: colors, typography, spacing, effects
   - DS styles.css imports were flattened
   - overrides from the page's inline <style> blocks
*/

/* fonts.css (vendorized) */
@import url('./assets/fonts/fonts-local.css');

/* colors.css */
:root {
  /* ---- Brand core (exact brand values) ---- */
  --ft-navy:        #274372; /* primary dark — "Food" wordmark, headings, sidebar */
  --ft-green:       #73b696; /* primary — solid buttons */
  --ft-green-light: #9eca7b; /* gradient start (top) */
  --ft-teal:        #369aaf; /* secondary — accents, gradient end (bottom) */

  /* ---- Navy ramp (tints/shades of --ft-navy) ---- */
  --ft-navy-900: #16283f;
  --ft-navy-800: #1d3557;
  --ft-navy-700: #274372; /* base */
  --ft-navy-600: #365a92;
  --ft-navy-500: #4e74ad;
  --ft-navy-300: #9fb4d0;
  --ft-navy-100: #dbe3ef;

  /* ---- Green ramp ---- */
  --ft-green-700: #4f9273;
  --ft-green-600: #61a585;
  --ft-green-500: #73b696; /* base */
  --ft-green-300: #a6d3bd;
  --ft-green-100: #dcefe6;

  /* ---- Teal ramp ---- */
  --ft-teal-700: #256f80;
  --ft-teal-600: #2e879b;
  --ft-teal-500: #369aaf; /* base */
  --ft-teal-300: #8cc7d4;
  --ft-teal-100: #dcecf0;

  /* Vivid marketing-green used for highlighted words / emphasis in social & campaign copy
     (a punchier, more saturated take on the muted brand green). */
  --ft-green-vivid: #17a86e;

  /* ---- Product accent (order-action orange, from the tablet menu UI) ---- */
  --ft-orange:      #f5871f;
  --ft-orange-600:  #dd7714;
  --ft-orange-100:  #fde6d2;

  /* ---- Neutrals ---- */
  --ft-white:   #ffffff;
  --ft-gray-50: #f6f8f9;
  --ft-gray-100:#eef1f3;
  --ft-gray-200:#e0e5e9;
  --ft-gray-300:#c8d0d6;
  --ft-gray-400:#9aa6ae;
  --ft-gray-500:#6b7880;
  --ft-gray-600:#4d585f;
  --ft-gray-700:#333c42;
  --ft-gray-900:#12181c;

  /* Dark surface used by the tablet ordering app */
  --ft-ink:       #14181b;
  --ft-ink-panel: #1c2226;
  --ft-ink-line:  #2c343a;

  /* ---- Gradients ---- */
  --ft-gradient-brand:   linear-gradient(180deg, #9eca7b 0%, #369aaf 100%); /* @kind color */
  --ft-gradient-logo:    linear-gradient(90deg, #6bbf7f 0%, #369aaf 100%); /* @kind color */
  --ft-gradient-brand-x: linear-gradient(90deg, #9eca7b 0%, #369aaf 100%);    /* @kind color */
  --ft-gradient-accent:  linear-gradient(180deg, #4bbf95 0%, #2e879b 100%); /* @kind color */

  /* ---- Semantic aliases ---- */
  --text-strong:   var(--ft-navy-700);
  --text-body:     var(--ft-gray-700);
  --text-muted:    var(--ft-gray-500);
  --text-on-brand: var(--ft-white);
  --text-link:     var(--ft-teal-600);

  --surface-page:   var(--ft-white);
  --surface-subtle: var(--ft-gray-50);
  --surface-card:   var(--ft-white);
  --surface-dark:   var(--ft-ink);

  --brand-primary:   var(--ft-green-500);
  --brand-secondary: var(--ft-teal-500);
  --brand-dark:      var(--ft-navy-700);
  --accent-action:   var(--ft-orange);

  --border-subtle: var(--ft-gray-200);
  --border-card:   var(--ft-teal-300);
  --border-strong: var(--ft-gray-300);

  --focus-ring: var(--ft-teal-500);
}

/* typography.css */
:root {
  /* Families */
  --font-display: 'Saira', 'Magistral', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Mulish', 'Azo Sans', system-ui, -apple-system, sans-serif;

  /* Weights */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale (rem, 16px base) */
  --fs-display:  clamp(2.75rem, 5vw, 4rem);  /* @kind font */
  --fs-h1:       2.5rem;    /* 40 */
  --fs-h2:       2rem;      /* 32 */
  --fs-h3:       1.5rem;    /* 24 */
  --fs-h4:       1.25rem;   /* 20 */
  --fs-lg:       1.125rem;  /* 18 */
  --fs-body:     1rem;      /* 16 */
  --fs-sm:       0.875rem;  /* 14 */
  --fs-xs:       0.75rem;   /* 12 */
  --fs-eyebrow:  0.6875rem; /* 11 — uppercase labels */

  /* Line heights */
  --lh-tight:   1.05;  /* @kind font */
  --lh-heading: 1.15;  /* @kind font */
  --lh-snug:    1.35;  /* @kind font */
  --lh-body:    1.6;   /* @kind font */

  /* Letter spacing */
  --ls-display: -0.01em;  /* @kind font */
  --ls-tight:   -0.005em; /* @kind font */
  --ls-normal:  0;        /* @kind font */
  --ls-wide:    0.04em;   /* @kind font */
  --ls-caps:    0.12em;   /* @kind font */
}

/* spacing.css */
:root {
  --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;

  /* Container widths */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1360px;

  /* Section rhythm */
  --section-y:      var(--space-24);
  --gutter:         var(--space-6);
}

/* effects.css */
:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   8px;   /* buttons */
  --radius-md:   12px;  /* inputs, feature pills */
  --radius-lg:   16px;  /* cards */
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-mark: 22%;   /* squircle for icon boxes / app tiles */

  /* Elevation — soft, cool-tinted shadows */
  --shadow-xs:  0 1px 2px rgba(20, 39, 65, 0.06);
  --shadow-sm:  0 2px 6px rgba(20, 39, 65, 0.08);
  --shadow-md:  0 8px 20px rgba(20, 39, 65, 0.10);
  --shadow-lg:  0 16px 40px rgba(20, 39, 65, 0.14);
  --shadow-brand: 0 10px 24px rgba(54, 154, 175, 0.28); /* teal glow under gradient buttons */

  /* Borders */
  --border-width: 1px;          /* @kind spacing */
  --border-width-strong: 1.5px; /* @kind spacing */

  /* Motion */
  --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:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   320ms;   /* @kind other */

  /* Overlay used on photography (bottom→up brand fade) */
  --overlay-brand: linear-gradient(180deg, rgba(39,67,114,0) 0%, rgba(54,154,175,0.75) 60%, rgba(54,154,175,0.92) 100%);  /* @kind color */
  --overlay-ink:   linear-gradient(180deg, rgba(15,20,25,0) 0%, rgba(15,20,25,0.85) 100%);  /* @kind color */
}

/* Page-specific overrides (from original HTML inline styles) */
:root{
  --ft-green:#00c947; --ft-green-light:#00c947;
  --ft-green-700:#00c947; --ft-green-600:#00c947; --ft-green-500:#00c947;
  --ft-green-300:#00c947; --ft-green-100:#e8faee; --ft-green-vivid:#00c947;
  --ft-teal:#00c947; --ft-teal-700:#00c947; --ft-teal-600:#00c947;
  --ft-teal-500:#00c947; --ft-teal-300:#00c947; --ft-teal-100:#e8faee;
  --ft-navy:#282828; --ft-navy-900:#141414; --ft-navy-800:#1e1e1e;
  --ft-navy-700:#282828; --ft-navy-600:#3d3d3d; --ft-navy-500:#555555;
  --ft-navy-300:#a3a3a3; --ft-navy-100:#e0e0e0;
  --ft-dark:#282828; --ft-dark-900:#141414; --ft-dark-800:#1e1e1e;
  --ft-dark-700:#282828; --ft-dark-600:#3d3d3d; --ft-dark-500:#555555;
  --ft-dark-300:#a3a3a3; --ft-dark-100:#e0e0e0;
  --ft-orange:#00c947; --ft-orange-600:#00c947; --ft-orange-100:#e8faee;
  --ft-gray-50:#f7f7f7; --ft-gray-100:#f0f0f0; --ft-gray-200:#e2e2e2;
  --ft-gray-300:#c9c9c9; --ft-gray-400:#9c9c9c; --ft-gray-500:#6e6e6e;
  --ft-gray-600:#4f4f4f; --ft-gray-700:#333333; --ft-gray-900:#141414;
  --ft-ink:#1e1e1e; --ft-ink-panel:#282828; --ft-ink-line:#3a3a3a;
  --ft-gradient-brand:#00c947;
  --ft-gradient-brand-x:#00c947;
  --ft-gradient-logo:#00c947;
  --ft-gradient-accent:#00c947;
  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 8px 20px rgba(0,0,0,.10);
  --shadow-lg:0 16px 40px rgba(0,0,0,.14);
  --shadow-brand:0 10px 24px rgba(0,201,71,.30);
  --text-strong:#282828; --border-card:var(--ft-green-500);
  --overlay-brand:linear-gradient(180deg,rgba(20,20,20,0) 0%,rgba(0,201,71,.75) 60%,rgba(0,201,71,.92) 100%);
  --overlay-ink:linear-gradient(180deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.85) 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:var(--font-body);color:var(--ft-gray-700);-webkit-font-smoothing:antialiased}
::selection{background:var(--ft-teal-300);color:var(--ft-navy-900)}
.ft-wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.ft-h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.7vw,3.15rem);line-height:1.04;letter-spacing:-.02em}
.ft-ey{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.ft-it{font-style:italic}
@keyframes ftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.ft-tscroll{scrollbar-width:none}
.ft-tscroll::-webkit-scrollbar{display:none}
/* ---- responsividade ---- */
@media(max-width:960px){
  .r-split{grid-template-columns:1fr!important;gap:40px!important}
}
@media(max-width:980px){
  .r-navlinks{display:none!important}
}
@media(max-width:720px){
  .r-cliente span:last-child{display:none!important}
  .r-cliente{padding:0!important;width:44px!important;height:44px!important;border-radius:999px!important;justify-content:center!important;gap:0!important}
}
@media(max-width:860px){
  .r-navlinks{display:none!important}
  .r-pedido-img{position:static!important;top:auto!important;transform:none!important;width:100%!important;margin-top:32px!important}
  .r-pedido-txt{max-width:none!important}
  .r-footer{grid-template-columns:1fr 1fr!important}
  .r-gallery{grid-template-columns:repeat(2,1fr)!important}
  .r-ticket-img{position:static!important;width:100%!important;height:300px!important}
  .r-ticket-ov{display:none!important}
  .r-upsell img{width:100%!important;margin-left:0!important}
}
@media(max-width:760px){
  .r-2{grid-template-columns:1fr!important}
  .r-3{grid-template-columns:repeat(2,1fr)!important}
  .r-seg{grid-template-columns:repeat(3,1fr)!important}
  .r-tcard{flex:0 0 calc((100% - 22px)/2)!important}
}
@media(max-width:600px){
  .r-chip{display:none!important}
  .r-footer{grid-template-columns:1fr!important}
  .r-split{padding-top:64px!important;padding-bottom:64px!important}
  .ft-wrap{padding-left:20px!important;padding-right:20px!important}
  .r-3{grid-template-columns:1fr!important}
  .r-seg{grid-template-columns:repeat(2,1fr)!important}
  .r-tcard{flex:0 0 100%!important}
}

/* ---------------------------------------------------------------
   Portado do canvas: atributos style-hover viraram classes reais,
   e o mask dos icones virou a classe utilitaria .ico.
   --------------------------------------------------------------- */
.ico{display:inline-block;flex:none;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}

.r-cliente:hover{color:var(--ft-navy-800)}

.ft-feature{transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.ft-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-card)}

.ft-seg{transition:transform var(--dur-base) var(--ease-out),background var(--dur-base),border-color var(--dur-base)}
.ft-seg:hover{transform:translateY(-6px);background:var(--ft-teal-100);border-color:var(--border-card)}

.ft-tarrow{transition:border-color var(--dur-base),background var(--dur-base)}
.ft-tarrow:hover{border-color:var(--ft-teal-600);background:var(--ft-teal-100)}

/* FAQ (o acordeao era estado React no canvas) */
.ft-faq-a{display:none}
.ft-faq.is-open .ft-faq-a{display:block}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important}
}