/* ==========================================================================
   Valytech Design Tokens
   Extracted from live page at http://localhost:8080
   Date: 2026-03-24
   Source: Framer-hosted Valytech homepage, computed styles via Playwright
   ========================================================================== */

:root {

  /* ========================================================================
     COLORS
     ======================================================================== */

  /* --- Page Background --- */
  /* Measured from: document.body, .framer-72rtr7 wrapper */
  --color-bg-page:             #ffffff;              /* rgb(255, 255, 255) */

  /* --- Surface / Panel Backgrounds --- */
  /* Measured from: .framer-6010js (nav bg), .framer-JWzay (about panel), multiple containers */
  --color-bg-surface:          #e7e7e7;              /* rgb(231, 231, 231) - primary surface */
  --color-bg-surface-alt:      #f3f3f3;              /* rgb(243, 243, 243) - secondary surface / pill buttons / inner panels */
  --color-bg-dark:             #272727;              /* rgb(39, 39, 39) - dark mode panels */

  /* --- Text Colors --- */
  /* Measured from: .framer-text elements across the page */
  --color-text-primary:        #272727;              /* rgb(39, 39, 39) - main body text */
  --color-text-secondary:      rgba(39, 39, 39, 0.5); /* eyebrow text, muted labels */
  --color-text-tertiary:       rgba(39, 39, 39, 0.3); /* subtle/faded text */
  --color-text-on-dark:        #ffffff;              /* rgb(255, 255, 255) - text on dark backgrounds */
  --color-text-on-dark-muted:  #f3f3f3;              /* rgb(243, 243, 243) - contact section large words */
  --color-text-disabled:       #d4d4d4;              /* rgb(212, 212, 212) */

  /* --- Brand / Accent Colors --- */
  /* Measured from: Framer token CSS custom properties and colored containers */
  --color-accent-orange:       #f8924a;              /* rgb(248, 146, 74)  - --brand-accent / --token-6bf933c6 */
  --color-accent-green:        #2da677;              /* rgb(45, 166, 119)  - availability dot, status indicators */
  --color-accent-blue:         #68b7de;              /* rgb(104, 183, 222) - --token-a45d4ed6 */
  --color-accent-pink:         #f2c3f0;              /* rgb(242, 195, 240) - --token-234b9036 */
  --color-accent-red:          #e05e36;              /* rgb(224, 94, 54)   - --token-e57ae220 */
  --color-accent-purple:       #b5b6e8;              /* rgb(181, 182, 232) - --token-b5e800e7 */
  --color-accent-lime:         #68ed00;              /* --token-20380615 */
  --color-accent-coral:        #ff4400;              /* --token-308637ac */
  --color-accent-indigo:       #5465ff;              /* --token-4df29a8a */
  --color-accent-yellow:       #e6e393;              /* --token-afd8adde */
  --color-accent-tan:          #d9c3b0;              /* --token-aaaefc6e */
  --color-accent-teal:         #437c80;              /* rgb(67, 124, 128)  - image card overlay */
  --color-accent-slate:        #64838e;              /* rgb(100, 131, 142) - image card overlay */

  /* --- Border Colors --- */
  /* Measured from: Framer --border-color variable and computed borders */
  --color-border:              #cfcfcf;              /* Framer default --border-color */
  --color-border-light:        #dcdfe4;              /* rgb(220, 223, 228) */


  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */

  /* --- Font Families --- */
  /* Measured from: all .framer-text elements - single font family across page */
  --font-primary:              "Space Grotesk", "Space Grotesk Placeholder", sans-serif;
  --font-system:               sans-serif;           /* fallback on non-text containers */

  /* --- Font Sizes --- */
  /* Measured from: all .framer-text elements, sorted ascending */
  --font-size-2xs:             11px;                 /* smallest text on page */
  --font-size-xs:              12px;                 /* subtitle, dates, labels, "How we work:" label, metric labels */
  --font-size-sm:              14px;                 /* body text, nav links, eyebrows, pill text, card body, numbered items */
  --font-size-base:            16px;                 /* brand name "Valytech", Framer default --framer-font-size */
  --font-size-lg:              24px;                 /* medium headings (e.g. "Reporting" card title) */
  --font-size-xl:              40px;                 /* metric "10+", contact heading "Let's design a calmer operation" */
  --font-size-2xl:             48px;                 /* large heading (email "hello@aitelier.ai") */
  --font-size-display:         320px;                /* contact section display words: "reduce", "simplify", etc. */

  /* --- Font Weights --- */
  /* Measured from: all .framer-text elements */
  --font-weight-light:         300;                  /* metric value "10+", large email heading */
  --font-weight-regular:       400;                  /* body text, labels, dates, eyebrows */
  --font-weight-medium:        500;                  /* brand name, nav links, pill text, headings, numbered items */
  --font-weight-bold:          700;                  /* emphasis text */

  /* --- Line Heights --- */
  /* Measured from: all .framer-text elements */
  --line-height-tight:         1;                    /* 40px/40px on metric value, 24px/24px on med heading, 320px/320px display */
  --line-height-snug:          1.1;                  /* 44px/40px on contact heading */
  --line-height-base:          1.2;                  /* 19.2px/16px brand, 14.4px/12px dates - Framer default --framer-line-height */
  --line-height-relaxed:       1.3;                  /* 18.2px/14px body text, 15.6px/12px labels */

  /* --- Letter Spacing --- */
  /* Measured from: specific elements */
  --letter-spacing-tight:      -0.8px;               /* contact heading "Let's design a calmer operation" */
  --letter-spacing-tighter:    -0.14px;              /* testimonial attribution "Private client" */
  --letter-spacing-display:    -25.6px;              /* contact section 320px display text */
  --letter-spacing-normal:     normal;               /* most text */


  /* ========================================================================
     SPACING
     ======================================================================== */

  /* --- Base Unit --- */
  /* Measured from: padding and gap values across page containers */
  --space-1:                   2px;                  /* availability pill top/bottom padding */
  --space-2:                   4px;                  /* image card overlay padding */
  --space-3:                   8px;                  /* section padding, pill gap, availability dot size */
  --space-4:                   10px;                 /* marquee section padding, button gap */
  --space-5:                   12px;                 /* about panel inner padding, pill left padding */
  --space-6:                   16px;                 /* about panel bottom padding, gap in about panel */
  --space-8:                   24px;                 /* main content padding, page outer padding, about panel padding, card vertical padding, pill right padding */
  --space-10:                  40px;                 /* card horizontal gap, about section side padding */
  --space-16:                  120px;                /* about section bottom padding, section gap */
  --space-20:                  160px;                /* about section top padding */


  /* ========================================================================
     BORDERS
     ======================================================================== */

  /* Measured from: Framer CSS variables and computed border values */
  --border-width:              1px;                  /* Framer --border-bottom-width, --border-top-width, etc. */
  --border-style:              solid;                /* Framer --border-style */
  --border-default:            1px solid #cfcfcf;    /* composite from Framer variables */

  /* --- Border Radii --- */
  /* Measured from: various containers across the page */
  --radius-xs:                 8px;                  /* image card overlays (.framer-8W21N) */
  --radius-sm:                 12px;                 /* inner panels (.framer-1gvkcob), indicator dots, inner cards */
  --radius-md:                 24px;                 /* about panel (.framer-JWzay), page content padding */
  --radius-lg:                 40px;                 /* pill buttons, availability pill */
  --radius-full:               100%;                 /* green status dots */
  --radius-circle:             2000px;               /* process tab circles (A/B/C/D) */


  /* ========================================================================
     SHADOWS
     ======================================================================== */

  /* Measured from: computed boxShadow values - the design uses flat/minimal shadows */
  --shadow-none:               none;                 /* most elements have no shadow */


  /* ========================================================================
     MOTION / TRANSITIONS
     ======================================================================== */

  /* Measured from: computed transition values on interactive elements */
  --transition-color:          color 0.3s cubic-bezier(0.44, 0, 0.56, 1);   /* nav links hover */
  --transition-default:        all 0.2s ease;        /* general transition fallback */
  --ease-in-out:               cubic-bezier(0.44, 0, 0.56, 1);              /* primary easing curve */
  --duration-fast:             0.2s;
  --duration-normal:           0.3s;


  /* ========================================================================
     LAYOUT
     ======================================================================== */

  /* --- Container Max Widths --- */
  /* Measured from: computed maxWidth values across page elements */
  --container-xs:              480px;
  --container-sm:              500px;
  --container-md:              600px;
  --container-base:            680px;
  --container-lg:              864px;
  --container-xl:              960px;                /* marquee section, main content constraint */
  --container-2xl:             1000px;

  /* --- Responsive Breakpoints --- */
  /* Measured from: CSS @media rules in stylesheets */
  --breakpoint-mobile:         519.98px;             /* max-width for small mobile */
  --breakpoint-mobile-lg:      520px;                /* min-width for large mobile */
  --breakpoint-tablet:         640px;                /* min-width for tablet */
  --breakpoint-tablet-max:     1099.98px;            /* max-width for tablet */
  --breakpoint-desktop:        1100px;               /* min-width for desktop */

  /* --- Page Structure --- */
  /* Measured from: .framer-1lbs32n (main content), .framer-6010js (nav bg) */
  --page-padding:              8px;                  /* very narrow page margins */
  --nav-height:                900px;                /* nav background area height (full viewport, absolute positioned) */


  /* ========================================================================
     COMPONENTS
     ======================================================================== */

  /* --- Navigation --- */
  /* Measured from: .framer-6010js nav area, brand text, nav links, availability pill */
  --nav-bg:                    var(--color-bg-surface);        /* rgb(231, 231, 231) */
  --nav-position:              absolute;
  --nav-brand-font-size:       var(--font-size-base);          /* 16px */
  --nav-brand-font-weight:     var(--font-weight-medium);      /* 500 */
  --nav-brand-color:           var(--color-text-primary);      /* #272727 */
  --nav-brand-line-height:     19.2px;
  --nav-subtitle-font-size:    var(--font-size-xs);            /* 12px */
  --nav-link-font-size:        var(--font-size-sm);            /* 14px */
  --nav-link-font-weight:      var(--font-weight-medium);      /* 500 */
  --nav-link-color:            var(--color-text-primary);      /* #272727 */

  /* --- Availability Pill --- */
  /* Measured from: availability pill link element */
  --pill-bg:                   var(--color-bg-page);           /* #ffffff */
  --pill-radius:               var(--radius-lg);               /* 40px */
  --pill-height:               40px;
  --pill-padding:              2px 24px 2px 12px;
  --pill-gap:                  8px;
  --pill-font-size:            var(--font-size-sm);            /* 14px */
  --pill-font-weight:          var(--font-weight-medium);      /* 500 */
  --pill-text-color:           var(--color-text-primary);      /* #272727 */
  --pill-dot-size:             8px;
  --pill-dot-color:            var(--color-accent-green);      /* #2da677 */

  /* --- Pill Buttons (Website, Learn more) --- */
  /* Measured from: button-like links across card area */
  --btn-pill-bg:               var(--color-bg-surface-alt);    /* #f3f3f3 */
  --btn-pill-radius:           var(--radius-lg);               /* 40px */
  --btn-pill-height:           40px;
  --btn-pill-padding:          0px 24px;
  --btn-pill-gap:              10px;
  --btn-pill-font-size:        var(--font-size-sm);            /* 14px */
  --btn-pill-font-weight:      var(--font-weight-medium);      /* 500 */
  --btn-pill-text-color:       var(--color-text-primary);      /* #272727 */

  /* --- About Panel --- */
  /* Measured from: .framer-JWzay (outer panel), .framer-1gvkcob (inner panel) */
  --about-panel-bg:            var(--color-bg-surface);        /* #e7e7e7 */
  --about-panel-radius:        var(--radius-md);               /* 24px */
  --about-panel-padding:       24px 24px 16px;
  --about-panel-gap:           16px;
  --about-inner-bg:            var(--color-bg-surface-alt);    /* #f3f3f3 */
  --about-inner-radius-top:    12px 12px 0px 0px;
  --about-inner-radius-bottom: 0px 0px 12px 12px;

  /* --- Process Circle Tabs (A/B/C/D) --- */
  /* Measured from: .framer-fWJV3 circle containers */
  --process-circle-size:       298.167px;
  --process-circle-bg:         var(--color-bg-surface);        /* #e7e7e7 */
  --process-circle-radius:     var(--radius-circle);           /* 2000px */

  /* --- Project Work Cards --- */
  /* Measured from: card containers holding "LEAN Rollout", "Discovery & Audit" etc. */
  --card-bg:                   var(--color-bg-page);           /* #ffffff */
  --card-padding:              24px 0px;
  --card-gap:                  40px;
  --card-title-font-size:      var(--font-size-sm);            /* 14px — most card titles */
  --card-title-lg-font-size:   var(--font-size-lg);            /* 24px — "Reporting" heading */
  --card-title-font-weight:    var(--font-weight-medium);      /* 500 */
  --card-date-font-size:       var(--font-size-xs);            /* 12px */
  --card-date-font-weight:     var(--font-weight-regular);     /* 400 */
  --card-body-font-size:       var(--font-size-sm);            /* 14px */
  --card-body-line-height:     18.2px;

  /* --- Image Card Overlays --- */
  /* Measured from: .framer-8W21N and similar card image containers */
  --img-card-radius:           var(--radius-xs);               /* 8px */
  --img-card-padding:          4px;

  /* --- Inner Content Panels (12px radius) --- */
  /* Measured from: .framer-oq5cw6, .framer-l923j5, etc. */
  --inner-panel-bg:            var(--color-bg-surface-alt);    /* #f3f3f3 */
  --inner-panel-radius:        var(--radius-sm);               /* 12px */

  /* --- Eyebrow Text (/about, /systems_lab, /contact) --- */
  /* Measured from: eyebrow text elements */
  --eyebrow-font-size:         var(--font-size-sm);            /* 14px */
  --eyebrow-font-weight:       var(--font-weight-regular);     /* 400 */
  --eyebrow-color:             var(--color-text-secondary);    /* rgba(39, 39, 39, 0.5) */
  --eyebrow-line-height:       15.4px;

  /* --- Section Body Text --- */
  /* Measured from: about section description, card body text */
  --body-font-size:            var(--font-size-sm);            /* 14px */
  --body-font-weight:          var(--font-weight-regular);     /* 400 */
  --body-line-height:          18.2px;
  --body-color:                var(--color-text-primary);      /* #272727 */

  /* --- Metric Display --- */
  /* Measured from: "10+" metric value */
  --metric-value-font-size:    var(--font-size-xl);            /* 40px */
  --metric-value-font-weight:  var(--font-weight-light);       /* 300 */
  --metric-value-line-height:  40px;
  --metric-label-font-size:    var(--font-size-xs);            /* 12px */
  --metric-label-font-weight:  var(--font-weight-regular);     /* 400 */
  --metric-label-line-height:  15.6px;

  /* --- Contact Section Heading --- */
  /* Measured from: "Let's design a calmer operation" */
  --heading-xl-font-size:      var(--font-size-xl);            /* 40px */
  --heading-xl-font-weight:    var(--font-weight-medium);      /* 500 */
  --heading-xl-line-height:    44px;
  --heading-xl-letter-spacing: -0.8px;

  /* --- Contact Display Text (reduce, simplify, automate...) --- */
  /* Measured from: large 320px text in contact section */
  --display-font-size:         var(--font-size-display);       /* 320px */
  --display-font-weight:       var(--font-weight-medium);      /* 500 */
  --display-line-height:       320px;
  --display-letter-spacing:    -25.6px;
  --display-color:             var(--color-text-on-dark-muted); /* #f3f3f3 */

  /* --- Large Email Link --- */
  /* Measured from: "hello@aitelier.ai" text */
  --email-font-size:           var(--font-size-2xl);           /* 48px */
  --email-font-weight:         var(--font-weight-light);       /* 300 */
  --email-line-height:         52.8px;
  --email-color:               var(--color-text-on-dark);      /* #ffffff */

  /* --- Testimonial --- */
  /* Measured from: testimonial text and attribution */
  --testimonial-font-size:     var(--font-size-sm);            /* 14px */
  --testimonial-line-height:   18.2px;
  --testimonial-attr-font-weight: var(--font-weight-medium);   /* 500 */
  --testimonial-attr-line-height: 16.8px;
  --testimonial-attr-letter-spacing: -0.14px;

  /* --- Numbered List Items (01 Discovery, etc.) --- */
  /* Measured from: numbered service items */
  --numbered-font-size:        var(--font-size-sm);            /* 14px */
  --numbered-font-weight:      var(--font-weight-medium);      /* 500 */
  --numbered-line-height:      24px;
  --numbered-gap:              10px;

  /* --- How We Work / Dark Panel Items --- */
  /* Measured from: "Client discovery" text on dark background */
  --dark-item-font-size:       var(--font-size-xs);            /* 12px */
  --dark-item-font-weight:     var(--font-weight-medium);      /* 500 */
  --dark-item-color:           var(--color-text-on-dark);      /* #ffffff */
  --dark-item-line-height:     14.4px;

  /* --- Lab Section Quote --- */
  /* Measured from: "We are currently exploring..." italic text */
  --quote-font-size:           var(--font-size-xs);            /* 12px */
  --quote-font-weight:         var(--font-weight-regular);     /* 400 */
  --quote-color:               var(--color-text-secondary);    /* rgba(39, 39, 39, 0.5) */
  --quote-line-height:         15.6px;

  /* --- Tag Pills (Discovery, Automation, LEAN, Operations) --- */
  /* Measured from: process tag text inside tabs area */
  --tag-font-size:             var(--font-size-sm);            /* 14px */
  --tag-font-weight:           var(--font-weight-medium);      /* 500 */
  --tag-line-height:           24px;


  /* ========================================================================
     FRAMER FRAMEWORK DEFAULTS (preserved for reference)
     ======================================================================== */

  /* Measured from: :root CSS custom properties in Framer stylesheets */
  --framer-font-family:        Inter, Inter Placeholder, sans-serif;  /* Framer default, overridden by component styles */
  --framer-font-size:          16px;
  --framer-font-weight:        500;
  --framer-line-height:        1.2em;
  --framer-text-color:         #000;
  --framer-letter-spacing:     0;
  --framer-text-transform:     none;
  --framer-text-alignment:     start;
  --framer-link-text-color:    #272727;
  --framer-link-text-decoration: none;
  --framer-link-hover-text-color: #272727;
  --framer-link-hover-text-decoration: underline;
  --framer-link-current-text-color: #272727;
  --framer-link-current-text-decoration: underline;
}