/* ========================================================================
   OrganoGEN Design System — Tokens & Semantic Type
   Import into any artifact:
       <link rel="stylesheet" href="colors_and_type.css">
   Source of truth: organogen-website/styles.css.
   ======================================================================== */

/* ---- Webfonts: loaded via <link> in each page head, not @import.
   @import serialises behind this stylesheet's own download+parse and
   defeats the preconnect hints. See tools note / SEO audit 2026-08-17. ---- */

:root {
    /* ============ COLOR TOKENS ============ */
    /* Brand — Primary */
    --og-deep-teal:        #0e323f;   /* primary brand, headings on light, CTA bg */
    --og-teal-blue:        #20728C;   /* secondary brand, accent, links, Hand & Wrist pillar */

    /* Brand — Pillar accents */
    --og-burgundy:         #8d364a;   /* Regenerative Medicine pillar */
    --og-olive:            #8d861d;   /* Orthopedics & Trauma pillar */
    --og-pale-pink:        #e9dde0;   /* Alt section background, soft tint */

    /* Pillar tints (always the pillar color at 10% alpha — for icon backgrounds, never washes) */
    --og-tint-teal:        rgba(32,114,140,0.10);
    --og-tint-burgundy:    rgba(141,54,74,0.10);
    --og-tint-olive:       rgba(141,134,29,0.10);

    /* Neutrals */
    --og-white:            #FFFFFF;
    --og-off-white:        #F8F9FA;     /* alt section bg */
    --og-light-gray:       #E0E0E0;     /* default border */
    --og-text-dark:        #1A1A1A;     /* body text on light */
    --og-text-light:       #4A4A4A;     /* secondary body */
    --og-text-secondary:   #6B7280;     /* muted, captions */
    --og-background-dark:  #111111;     /* footer fallback */

    /* Branded dark (used for footer gradient + sticky CTA shadow) */
    --og-deep-teal-1:      #001e2e;
    --og-deep-teal-2:      #001219;
    --og-footer-gradient:  linear-gradient(to right, var(--og-deep-teal-1), var(--og-deep-teal-2));

    /* Semantic foreground/background aliases */
    --og-fg-primary:       var(--og-text-dark);
    --og-fg-secondary:     var(--og-text-light);
    --og-fg-muted:         var(--og-text-secondary);
    --og-fg-inverse:       var(--og-white);
    --og-bg-base:          var(--og-white);
    --og-bg-alt:           var(--og-off-white);
    --og-bg-soft:          var(--og-pale-pink);
    --og-bg-dark:          var(--og-text-dark);
    --og-link:             var(--og-teal-blue);
    --og-link-hover:       var(--og-deep-teal);
    --og-border:           var(--og-light-gray);
    --og-border-soft:      rgba(0,0,0,0.05);

    /* ============ TYPOGRAPHY ============ */
    --og-font-body:        'Inter', system-ui, -apple-system, sans-serif;
    --og-font-heading:     'Outfit', system-ui, -apple-system, sans-serif;

    /* Type scale */
    --og-fs-display:       4.5rem;       /* hero h1 desktop */
    --og-fs-display-sm:    2.8rem;       /* hero h1 mobile */
    --og-fs-page:          3.5rem;       /* page hero h1 */
    --og-fs-h1:            3rem;         /* mission h2 */
    --og-fs-h2:            2.5rem;       /* section h2, pillar h2 */
    --og-fs-h3:            1.8rem;       /* product detail h3, popover h3 */
    --og-fs-h4:            1.5rem;       /* lead-gen form h3, popover info */
    --og-fs-h5:            1.25rem;      /* product card h3, hero p */
    --og-fs-body-lg:       1.1rem;       /* mission p, page intro */
    --og-fs-body:          1rem;         /* default body */
    --og-fs-body-sm:       0.95rem;      /* nav, learn-more, card text */
    --og-fs-small:         0.85rem;      /* tagline, subtitle */
    --og-fs-micro:         0.75rem;      /* spec label, button uppercase */
    --og-fs-tag:           0.7rem;       /* feature pill text */

    /* Weights */
    --og-fw-light:         300;
    --og-fw-regular:       400;
    --og-fw-medium:        500;
    --og-fw-semibold:      600;
    --og-fw-bold:          700;
    --og-fw-black:         800;

    /* Line heights */
    --og-lh-display:       1.05;
    --og-lh-heading:       1.1;
    --og-lh-body:          1.6;
    --og-lh-tight:         1.4;

    /* Letter spacing */
    --og-tracking-tag:     0.05em;       /* button uppercase, taglines */
    --og-tracking-kicker:  0.15em;       /* hero subtitle, finder title */
    --og-tracking-default: 0;

    /* ============ SPACING ============ */
    --og-space-xs:         0.5rem;
    --og-space-sm:         1rem;
    --og-space-md:         2rem;
    --og-space-lg:         4rem;
    --og-space-xl:         8rem;

    /* Container */
    --og-container-max:    1200px;
    --og-section-header-max: 800px;

    /* ============ EFFECTS ============ */
    --og-shadow-sm:        0 4px 6px rgba(0,0,0,0.05);
    --og-shadow-md:        0 10px 30px rgba(0,0,0,0.08);
    --og-shadow-lg:        0 20px 40px rgba(0,0,0,0.12);
    --og-shadow-modal:     0 25px 50px -12px rgba(0,0,0,0.5);
    --og-shadow-cta:       0 10px 25px rgba(14,50,63,0.4);
    --og-shadow-tint-teal:    0 15px 35px rgba(32,114,140,0.15);
    --og-shadow-tint-burgundy:0 15px 35px rgba(141,54,74,0.15);
    --og-shadow-tint-olive:   0 15px 35px rgba(141,134,29,0.15);

    --og-radius-sm:        2px;          /* canonical button radius */
    --og-radius-md:        4px;          /* inputs, smaller cards */
    --og-radius-lg:        8px;          /* large cards, modals, carousels */
    --og-radius-pill:      9999px;

    --og-blur:             blur(12px);
    --og-blur-soft:        blur(10px);
    --og-blur-overlay:     blur(8px);

    /* Transitions */
    --og-transition-fast:     all 0.2s ease;
    --og-transition-standard: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --og-ease:                cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================================
   SEMANTIC TYPE — element-level defaults
   Use directly on elements, OR copy as utility classes.
   ===================================================================== */
.og-body, body.og-body {
    font-family: var(--og-font-body);
    color: var(--og-fg-primary);
    background: var(--og-bg-base);
    line-height: var(--og-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.og-h1, .og-display {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-bold);
    line-height: var(--og-lh-display);
    color: var(--og-fg-primary);
    font-size: var(--og-fs-display);
    letter-spacing: var(--og-tracking-default);
}

.og-h2 {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-bold);
    line-height: var(--og-lh-heading);
    color: var(--og-fg-primary);
    font-size: var(--og-fs-h2);
}

.og-h3 {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-bold);
    line-height: var(--og-lh-heading);
    color: var(--og-deep-teal);
    font-size: var(--og-fs-h3);
}

.og-h4 {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-bold);
    line-height: var(--og-lh-heading);
    color: var(--og-fg-primary);
    font-size: var(--og-fs-h4);
}

.og-h5 {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-bold);
    color: var(--og-deep-teal);
    font-size: var(--og-fs-h5);
}

.og-p {
    font-family: var(--og-font-body);
    font-weight: var(--og-fw-regular);
    line-height: var(--og-lh-body);
    color: var(--og-fg-secondary);
    font-size: var(--og-fs-body);
}

.og-lead {
    font-family: var(--og-font-body);
    font-weight: var(--og-fw-light);
    color: var(--og-fg-secondary);
    font-size: var(--og-fs-body-lg);
    line-height: var(--og-lh-body);
}

.og-kicker {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--og-tracking-kicker);
    font-size: var(--og-fs-small);
    color: var(--og-teal-blue);
}

.og-section-label {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--og-deep-teal);
    font-size: var(--og-fs-body-sm);
}

.og-tagline {
    font-family: var(--og-font-body);
    font-weight: var(--og-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--og-tracking-tag);
    color: var(--og-teal-blue);
    font-size: var(--og-fs-micro);
}

.og-spec-label {
    font-family: var(--og-font-body);
    font-weight: var(--og-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--og-tracking-tag);
    color: var(--og-fg-secondary);
    font-size: var(--og-fs-micro);
}

.og-stat-number {
    font-family: var(--og-font-heading);
    font-weight: var(--og-fw-black);
    color: var(--og-teal-blue);
    font-size: 2.5rem;
    line-height: 1;
}

.og-mono, code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
}

/* Link defaults */
.og-link {
    color: var(--og-link);
    text-decoration: none;
    transition: var(--og-transition-fast);
}
.og-link:hover { color: var(--og-link-hover); text-decoration: underline; }

/* Button base — square radius is brand-critical */
.og-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-family: var(--og-font-body);
    font-weight: var(--og-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--og-tracking-tag);
    font-size: 0.9rem;
    border-radius: var(--og-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--og-transition-standard);
    text-decoration: none;
}
.og-btn-primary   { background: var(--og-deep-teal); color: var(--og-white); border-color: var(--og-deep-teal); }
.og-btn-primary:hover { background: var(--og-teal-blue); border-color: var(--og-teal-blue); transform: translateY(-2px); box-shadow: var(--og-shadow-md); }
.og-btn-secondary { background: transparent; color: var(--og-deep-teal); border-color: var(--og-deep-teal); }
.og-btn-secondary:hover { background: var(--og-deep-teal); color: var(--og-white); transform: translateY(-2px); }

/* Primary nav active-tab underline */
.nav > a.is-active,
.nav__item > a.is-active,
.nav__item > .nav__trigger.is-active{position:relative}
.nav > a.is-active::after,
.nav__item > a.is-active::after,
.nav__item > .nav__trigger.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--og-deep-teal);border-radius:1px}

/* Primary nav dropdown menus (Solutions, Procedures, For You) */
.nav__item{position:relative;display:flex;align-items:center}
.nav__item > a,
.nav__item > .nav__trigger{font-family:inherit;font-weight:500;font-size:0.95rem;color:var(--og-text-dark);padding:0.5rem 0;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:0.25rem;line-height:1}
.nav__item > .nav__trigger{color:var(--og-text-dark)}
.nav__item > a:hover,
.nav__item > .nav__trigger:hover,
.nav__item:hover > a,
.nav__item:hover > .nav__trigger{color:var(--og-teal-blue)}
.nav__item > a.is-active,
.nav__item > .nav__trigger.is-active{color:var(--og-deep-teal);font-weight:600}
.nav__caret{font-size:0.7rem;line-height:1;transition:transform .15s ease;opacity:0.7}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret{transform:rotate(180deg)}
.nav__menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;background:#fff;border:1px solid var(--og-border);border-radius:8px;box-shadow:0 12px 32px rgba(0,30,46,0.14);padding:0.45rem;min-width:240px;display:none;flex-direction:column;gap:2px;z-index:200}
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu{display:flex}
.nav__menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav__menu a{padding:0.55rem 0.8rem;border-radius:5px;font-size:0.88rem;font-weight:500;color:var(--og-text-dark);white-space:nowrap;text-decoration:none}
.nav__menu a:hover{background:var(--og-tint-teal);color:var(--og-teal-blue)}
.nav__menu a.is-active{background:var(--og-tint-teal);color:var(--og-deep-teal);font-weight:600}
@media (max-width:960px){
    .nav__menu{display:none !important}
}

/* Stage 2 (2026-08-16): /el/ is live and the switcher is two-way in both
   trees, so the Stage 1 rules that hid it are removed. To roll back, restore:
     .lang-switch{display:none !important}
     .drawer__lang{display:none !important} */