/* ==========================================================================
   Smart Search — Design tokens
   --------------------------------------------------------------------------
   ΜΟΝΟ tokens εδώ: χρώματα, γραμματοσειρές, μεγέθη, spacing, radii, σκιές.
   Layout properties (display/flex/grid/position) ΔΕΝ γίνονται variables.

   Κλίμακα: κάθε μέγεθος είναι fluid μεταξύ 991px και 1920px.
     slope(vw) = (max - min) / (1920 - 991) * 100
     intercept = min - (max - min) / (1920 - 991) * 991
   Το max είναι πάντα η τιμή της μακέτας στα 1920px.

   Κάτω από τα 991px το clamp καταργείται — δες το τελευταίο block.
   ========================================================================== */

:root {

  /* ---------- Χρώματα: brand ---------- */
  --c-navy:              #15236B;
  /* Η μπάρα του Template 2 (node 216:256) και τα σκούρα pills της. */
  --c-navy-mid:          #2F3F8F;
  --c-ink:               #02092A;
  --c-blue:              #3C5DFF;
  --c-blue-alt:          #3D6FEA;
  --c-green:             #6AE21C;
  /* Η παύλα του βέλους στα βήματα (268:3230) — πιο μουντό από το --c-green. */
  --c-green-mid:         #65CD21;
  /* Το γαλάζιο του panel στον Ai Βοηθό — ως triplet, το θέλει σε rgba(). */
  --c-sky-rgb:           46, 125, 245;

  /* ---------- Χρώματα: επιφάνειες ---------- */
  --c-white:             #FFFFFF;
  --c-black:             #000000;
  --c-surface:           #F9FCFF;
  --c-blue-50:           #EBEFFA;
  --c-blue-75:           #E0E6F7;
  --c-blue-100:          #D4DDF5;
  --c-grey-700:          #404040;
  --c-field:             #EEF1FA;
  --c-border-soft:       #919AC7;
  --c-success-bg:        #EEF8F1;
  --c-success:           #6FDC49;
  --c-danger-bg:         #FFE8EB;
  --c-danger:            #FF5264;

  /* ---------- Χρώματα: διαφανή ---------- */
  --c-chip-bg:           rgba(212, 221, 245, 0.7);
  --c-btn-ghost:         rgba(255, 255, 255, 0.6);
  --c-divider-on-blue:   rgba(255, 255, 255, 0.4);
  --c-divider-pricing:   rgba(255, 255, 255, 0.3);
  --c-feature-hover:     rgba(60, 93, 255, 0.4);
  /* Hover κάρτας οφελών (170:156). */
  --c-benefits-hover:    #EDF2FF;

  /* ---------- Σκιές ---------- */
  --shadow-card:           0 18px 15px rgba(47, 63, 143, 0.10);
  --shadow-chip:           0 6px 6px rgba(30, 46, 124, 0.05);
  --shadow-media:          0 19px 24px rgba(47, 63, 143, 0.14);
  --shadow-raised:         0 19px 48px rgba(47, 63, 143, 0.15);
  --shadow-raised-strong:  0 19px 48px rgba(47, 63, 143, 0.25);
  --shadow-logo:           0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-flow:           0 19px 24px rgba(47, 63, 143, 0.09);

  /* ---------- Gradients ---------- */
  --grad-fade-right:   linear-gradient(to right, rgba(255, 255, 255, 0), var(--c-white));
  --grad-fade-bottom:  linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--c-white));
  --grad-panel:        linear-gradient(160deg, var(--c-blue-100) 0%, var(--c-blue-50) 45%, var(--c-white) 100%);
  --grad-metrics-card:
    radial-gradient(85% 120% at 95% 5%, rgba(60, 93, 255, .72) 0%, rgba(60, 93, 255, 0) 68%),
    linear-gradient(145deg, var(--c-ink) 0%, var(--c-navy) 58%, #2945bd 100%);

  /*
   * Ai Βοηθός (118:1405). Στη μακέτα το panel ΔΕΝ είναι linear gradient αλλά
   * mesh wallpaper στο 50% πάνω σε λευκό, μέσα σε group στο 50% — δηλαδή 25%
   * του γαλάζιου --c-sky-rgb πάνω στο λευκό. Δύο radial στρώματα το
   * αναπαράγουν: μπλε κατά μήκος της ΠΑΝΩ ακμής, λευκό στην κάτω αριστερή
   * γωνία, ξανά μπλε κάτω δεξιά. Οι τιμές βγήκαν με δειγματοληψία χρωμάτων
   * πάνω στο render του node 167:58 (μέγιστο 0.24 alpha).
   */
  --grad-ai-panel:
    radial-gradient(80% 130% at 100% 108%,
      rgba(var(--c-sky-rgb), .24) 0%,
      rgba(var(--c-sky-rgb), .12) 45%,
      rgba(var(--c-sky-rgb), 0)   75%),
    radial-gradient(105% 125% at 30% -12%,
      rgba(var(--c-sky-rgb), .26) 0%,
      rgba(var(--c-sky-rgb), .20) 38%,
      rgba(var(--c-sky-rgb), .08) 70%,
      rgba(var(--c-sky-rgb), .035) 95%,
      rgba(var(--c-sky-rgb), 0)   118%);

  /*
   * Οι κάρτες των βημάτων (268:3219) έχουν ΤΟ ΙΔΙΟ wallpaper με τον Ai Βοηθό,
   * αναποδογυρισμένο κάθετα και σε κάθετο κουτί 366 × 530. Το αποτέλεσμα είναι
   * λευκή πάνω αριστερή γωνία, μπλε πάνω δεξιά και κάτω αριστερά, πιο ανοιχτό
   * κάτω δεξιά. Ίδια μέθοδος με το --grad-ai-panel: δύο radial στρώματα.
   */
  --grad-step-card:
    radial-gradient(115% 42% at 100% -6%,
      rgba(var(--c-sky-rgb), .24) 0%,
      rgba(var(--c-sky-rgb), .21) 30%,
      rgba(var(--c-sky-rgb), .17) 55%,
      rgba(var(--c-sky-rgb), .08) 80%,
      rgba(var(--c-sky-rgb), 0)  100%),
    radial-gradient(150% 70% at 25% 78%,
      rgba(var(--c-sky-rgb), .24) 0%,
      rgba(var(--c-sky-rgb), .20) 25%,
      rgba(var(--c-sky-rgb), .15) 45%,
      rgba(var(--c-sky-rgb), .12) 72%,
      rgba(var(--c-sky-rgb), 0)   96%);

  /*
   * Το panel των Οφελών (268:3447) — πάλι το ίδιο wallpaper, αυτή τη φορά
   * καθρεφτισμένο ΟΡΙΖΟΝΤΙΑ σε κουτί 953 × 593: μπλε κατά μήκος της πάνω
   * ακμής, το πιο έντονο σημείο κάτω αριστερά, λευκό κάτω δεξιά.
   */
  --grad-benefits-panel:
    radial-gradient(70% 120% at 0% 108%,
      rgba(var(--c-sky-rgb), .30) 0%,
      rgba(var(--c-sky-rgb), .18) 45%,
      rgba(var(--c-sky-rgb), 0)   78%),
    radial-gradient(95% 135% at 68% -10%,
      rgba(var(--c-sky-rgb), .26) 0%,
      rgba(var(--c-sky-rgb), .22) 35%,
      rgba(var(--c-sky-rgb), .14) 62%,
      rgba(var(--c-sky-rgb), .05) 82%,
      rgba(var(--c-sky-rgb), 0)  100%);

  /* ---------- Γραμματοσειρές ---------- */
  --ff-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --ff-ui:      'Inter', 'Segoe UI', system-ui, sans-serif;
  --ff-accent-serif: 'Manuale', Georgia, 'Times New Roman', serif;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ---------- Μεγέθη γραμματοσειράς (fluid 991 → 1920) ---------- */
  --fs-metric-value: clamp(64px, calc(4.27px + 6.028vw), 120px); /* 120px */
  --fs-metric-mark:  clamp(40px, calc(2.66px + 3.767vw), 75px);  /* 75px */
  --fs-metric-times: clamp(42px, calc(1.47px + 4.090vw), 80px);  /* 80px */
  --fs-step-num:   clamp(40px, calc(2.66px  + 3.767vw), 75px);  /* 75px */
  --fs-price:      clamp(38px, calc(3.86px  + 3.445vw), 70px);  /* 70px */
  --fs-h1:         clamp(32px, calc(6.4px   + 2.583vw), 56px);  /* 56px */
  --fs-h2-lg:      clamp(28px, calc(8.8px   + 1.938vw), 46px);  /* 46px */
  --fs-h2:         clamp(26px, calc(11.07px + 1.507vw), 40px);  /* 40px */
  --fs-h3:         clamp(20px, calc(11.47px + 0.861vw), 28px);  /* 28px */
  --fs-lead:       clamp(18px, calc(11.6px  + 0.646vw), 24px);  /* 24px */
  --fs-card-title: clamp(17px, calc(13.8px  + 0.323vw), 20px);  /* 20px */
  --fs-md:         clamp(15px, calc(11.8px  + 0.323vw), 18px);  /* 18px */
  --fs-base:       clamp(14px, calc(11.87px + 0.215vw), 16px);  /* 16px */
  --fs-sm:         clamp(13px, calc(11.93px + 0.108vw), 14px);  /* 14px */
  --fs-xs:         clamp(11px, calc(9.93px  + 0.108vw), 12px);  /* 12px */
  --fs-flow-title: clamp(24px, calc(15.47px + 0.861vw), 32px);  /* 32px */

  /* ---------- Letter-spacing ---------- */
  --ls-display:  -0.02em;   /* Manrope τίτλοι */
  --ls-ui:       -0.04em;   /* Inter κουμπιά & labels 16/18px */
  --ls-sm:       -0.02em;   /* Inter 14px */
  --ls-numeral:  -0.08em;   /* αριθμοί βημάτων */

  /* ---------- Line-height ---------- */
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.5;

  /* ---------- Spacing (fluid 991 → 1920) ---------- */
  --sp-2:  clamp(6px,  calc(3.87px + 0.215vw), 8px);
  --sp-3:  clamp(8px,  calc(3.73px + 0.431vw), 12px);
  --sp-4:  clamp(12px, calc(7.73px + 0.431vw), 16px);
  --sp-5:  clamp(14px, calc(7.6px  + 0.646vw), 20px);
  --sp-6:  clamp(16px, calc(7.47px + 0.861vw), 24px);
  --sp-8:  clamp(20px, calc(7.2px  + 1.292vw), 32px);
  --sp-10: clamp(24px, calc(6.93px + 1.722vw), 40px);
  --sp-12: clamp(28px, calc(6.67px + 2.153vw), 48px);
  --sp-14: clamp(32px, calc(6.4px  + 2.583vw), 56px);
  --sp-16: clamp(36px, calc(6.13px + 3.014vw), 64px);
  --sp-18: clamp(40px, calc(5.86px + 3.445vw), 72px);
  --sp-20: clamp(44px, calc(5.6px  + 3.875vw), 80px);
  --sp-26: clamp(56px, calc(4.8px  + 5.167vw), 104px);
  --sp-flow-top:     clamp(128px, calc(44.79px  + 8.397vw), 206px);
  --sp-flow-card-x:  clamp(36px,  calc(-99.47px + 13.670vw), 163px);
  --sp-flow-table-x: clamp(28px,  calc(-94.70px + 12.382vw), 143px);
  --sp-comparison-gap:         clamp(56px, calc(-40px + 9.688vw), 146px);
  /* Hero Template 2 (216:256): κάρτα 37 πλάγια, μπάρα 10 πάνω-κάτω. */
  --sp-demo-card-x:            clamp(28px, calc(18.40px + 0.969vw), 37px);
  --sp-demo-bar-y:             clamp(8px,  calc(5.87px  + 0.215vw), 10px);
  --sp-comparison-panel-top:   clamp(16px, calc(9.60px + 0.646vw), 22px);
  --sp-comparison-panel-right: clamp(16px, calc(7.47px + 0.861vw), 24px);
  --sp-comparison-panel-left:  clamp(32px, calc(-1.07px + 3.337vw), 63px);
  --sp-comparison-head:        clamp(34px, calc(21.20px + 1.292vw), 46px);
  --sp-comparison-head-logo:   clamp(29px, calc(18.33px + 1.076vw), 39px);
  --sp-comparison-row:         clamp(7.5px, calc(6.97px + 0.054vw), 8px);
  --sp-comparison-first-row:   clamp(10px, calc(8.93px + 0.108vw), 11px);
  --sp-comparison-last-row:    clamp(27.5px, calc(13.10px + 1.453vw), 41px);
  --sp-feature-card-x:         clamp(28px, calc(19.47px + 0.861vw), 36px);
  --sp-feature-card-top:       clamp(34px, calc(23.33px + 1.077vw), 44px);
  --sp-feature-card-bottom:    clamp(16px, calc(11.73px + 0.431vw), 20px);
  --sp-feature-slide-gap:      clamp(20px, calc(8.27px + 1.184vw), 31px);
  --sp-metrics-gap:            clamp(18px, calc(8.40px + 0.969vw), 27px);
  --sp-metrics-heading-gap:    clamp(40px, calc(26.13px + 1.399vw), 53px);
  --sp-badge-y:        clamp(7px, calc(4.87px + 0.215vw), 9px);
  --sp-badge-x:        clamp(14px, calc(9.73px + 0.431vw), 18px);
  --sp-pricing-column-gap: clamp(16px, calc(5.33px + 1.077vw), 26px);
  --sp-pricing-gutter-end: clamp(20px, calc(9.33px + 1.077vw), 30px);
  --sp-pricing-panel-y:    clamp(6px, calc(-91.07px + 9.796vw), 97px);
  --sp-pricing-content:    clamp(24px, calc(6.93px + 1.723vw), 40px);
  --sp-pricing-card-end:   clamp(23px, calc(5.93px + 1.723vw), 39px);
  --sp-pricing-price-gap:  clamp(10px, calc(5.73px + 0.431vw), 14px);
  --sp-pricing-list-gap:   clamp(14px, calc(5.47px + 0.861vw), 22px);

  --section-gap: var(--sp-26);

  /* ---------- Containers ---------- */
  --page-gutter:       var(--sp-20);
  --container:         1760px;
  --container-lg:      1505px;
  --container-metrics: 1470px;
  --container-metrics-title: 1120px;
  --container-features-heading: 737px;
  --container-md:      1360px;
  --container-sm:      1266px;
  --container-text:    1045px;
  --container-heading: 738px;
  --container-form:    821px;
  --container-video:   824px;
  --container-video-title: 791px;
  --container-cta:     1375px;
  --container-account: 1757px;
  /* Το pill του κλειδιού. Η μακέτα είχε 25 χαρακτήρες, τα κλειδιά του portal
     έχουν 32: στα 1920 φαίνεται ολόκληρο το κλειδί, από τα 1550 και κάτω
     κρατάει το πλάτος της μακέτας ώστε ο πίνακας να μη ξεχειλίζει. */
  --container-license-key: clamp(270px, calc(-190.8px + 29.73vw), 380px);
  --container-comparison: 1574px;
  --container-pricing: 1858px;
  --container-pricing-panel: 700px;
  --container-pricing-card: 405px;

  /* ---------- Ελάχιστα ύψη των Figma customer-flow canvases ---------- */
  --flow-hero-min:      clamp(680px, calc(450.72px + 23.136vw), 895px);
  --flow-dashboard-min: clamp(760px, calc(532.77px + 22.929vw), 973px);
  --feature-card-min:   clamp(190px, calc(169.73px + 2.045vw), 209px);
  --carousel-nav-size:  clamp(40px, calc(33.60px + 0.646vw), 46px);
  --help-hero-min:       clamp(720px, calc(521.53px + 20.022vw), 906px);
  --help-card-min:       clamp(560px, calc(421.32px + 13.994vw), 690px);
  --sp-help-top:         clamp(128px, calc(85.33px  + 4.306vw), 168px);

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   14px;
  --r-2xl:  20px;
  --r-pill: 32px;
  --r-3xl:  48px;
  --r-flow: 18px;
}

/* ==========================================================================
   Laptop — 992px έως 1550px
   Ίδιο layout, μικρότερα gutters. Η τυπογραφία συνεχίζει να κάνει clamp.
   ========================================================================== */
@media (max-width: 1550px) {
  :root {
    --page-gutter: var(--sp-12);
  }
}

/* ==========================================================================
   Tablet / Mobile — έως 991px
   ΕΔΩ ΚΑΤΑΡΓΕΙΤΑΙ ΤΟ CLAMP. Σταθερές τιμές από τη mobile μακέτα.

   TODO: Η mobile μακέτα ΔΕΝ έχει παραδοθεί ακόμη.
   Οι παρακάτω τιμές είναι προσωρινά ίσες με το `min` του κάθε clamp, ώστε η
   μετάβαση στα 991px να μην φαίνεται. Με την παράδοση της μακέτας
   αντικαθίστανται με τις πραγματικές τιμές — τίποτε άλλο δεν αλλάζει.
   ========================================================================== */
@media (max-width: 991px) {
  :root {
    --fs-metric-value: 64px;
    --fs-metric-mark:  40px;
    --fs-metric-times: 42px;
    --fs-step-num:   40px;
    --fs-price:      38px;
    --fs-h1:         32px;
    --fs-h2-lg:      28px;
    --fs-h2:         26px;
    --fs-h3:         20px;
    --fs-lead:       18px;
    --fs-card-title: 17px;
    --fs-md:         15px;
    --fs-base:       14px;
    --fs-sm:         13px;
    --fs-xs:         11px;
    --fs-flow-title: 24px;

    --sp-2:  6px;
    --sp-3:  8px;
    --sp-4:  12px;
    --sp-5:  14px;
    --sp-6:  16px;
    --sp-8:  20px;
    --sp-10: 24px;
    --sp-12: 28px;
    --sp-14: 32px;
    --sp-16: 36px;
    --sp-18: 40px;
    --sp-20: 44px;
    --sp-26: 56px;
    --sp-flow-top: 128px;
    --sp-flow-card-x: 36px;
    --sp-flow-table-x: 28px;
    --sp-comparison-gap: 56px;
    --sp-demo-card-x: 28px;
    --sp-demo-bar-y: 8px;
    --sp-comparison-panel-top: 16px;
    --sp-comparison-panel-right: 16px;
    --sp-comparison-panel-left: 32px;
    --sp-comparison-head: 34px;
    --sp-comparison-head-logo: 29px;
    --sp-comparison-row: 7.5px;
    --sp-comparison-first-row: 10px;
    --sp-comparison-last-row: 27.5px;
    --sp-feature-card-x: 28px;
    --sp-feature-card-top: 34px;
    --sp-feature-card-bottom: 16px;
    --sp-feature-slide-gap: 20px;
    --sp-metrics-gap: 18px;
    --sp-metrics-heading-gap: 40px;
    --sp-badge-y: 7px;
    --sp-badge-x: 14px;
    --sp-pricing-column-gap: 16px;
    --sp-pricing-gutter-end: 20px;
    --sp-pricing-panel-y: 6px;
    --sp-pricing-content: 24px;
    --sp-pricing-card-end: 23px;
    --sp-pricing-price-gap: 10px;
    --sp-pricing-list-gap: 14px;

    --container-license-key: 270px;

    --flow-hero-min: 680px;
    --flow-dashboard-min: 760px;
    --feature-card-min: 190px;
    --carousel-nav-size: 40px;
    --help-hero-min: 720px;
    --help-card-min: 560px;
    --sp-help-top: 128px;

    --page-gutter: 20px;
  }
}