/* Shared base: design tokens, typography, utilities. Used by both public and dashboard. */
:root {
/*    --shadow: 1px 2px 4px rgba(0,0,0,.03);*/
    --radius: 8px;
    --border: 1px solid rgba(0, 0, 0, 0.1);
    --grey: #6f6f6f;

    /* Retro-Modern Color Scheme (Inspired by Netlify Capsules) */
    --teal-primary: #34E2DF;        /* Modern cyan - main brand color */
    --teal-bright: #5EE8E5;         /* Bright cyan accent - for buttons and highlights */
    --teal-dark: #006050;           /* Dark teal - for screens/dark backgrounds */
    --teal-medium: #00a090;         /* Medium teal - for borders and depth */
    --teal-light: #b2f5ea;          /* Light teal - for subtle backgrounds */
    
    /* Neutral Colors */
    --gray-light: #f5f5f5;         /* Light gray background */
    --gray-medium: #e0e0e0;        /* Medium gray for borders */
    --gray-dark: #757575;          /* Dark gray for text */
    --white: #ffffff;
    --black: #0f1115;

    /* Brand colors - updated to retro-modern palette */
    --brand-color: var(--teal-primary);
    --brand-color-secondary: var(--teal-bright);
    --brand-color-dark: var(--teal-dark);
    --brand-orange: #ff6b35;        /* Orange brand color for MRR badges */
    --brand-orange-dark: #e55a2b;   /* Darker orange for hover states */
    --red: rgb(255, 56, 92);
    --green: #10b981; /* Lighter, more green success color */
    
    /* Background colors */
    --bg-color: var(--gray-light);
    --bg-white: var(--white);
    --bg-teal: var(--teal-primary);
    --bg-teal-dark: var(--teal-dark);
    
    /* Text colors */
    --color-text: var(--black);
    --color-text-secondary: var(--gray-dark);
    --color-text-light: #aaa;
    --link-color: var(--teal-primary);
    
    /* Chakra UI-inspired spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    
    /* Typography - Retro-Modern Font Stack */
    --font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-mono: 'Space Mono', 'Courier New', Courier, monospace;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Shadows - Chakra UI inspired */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Legacy support */
    --light-gray: var(--gray-light);
    --bg: var(--gray-light);
    --light-text-color: var(--color-text-light);
}

* {
    box-sizing: border-box;
}

html {
    font-family: var(--font-family-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headers use Space Grotesk */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
}

/* Body text, paragraphs, and labels use Instrument Sans */
p, span, div, label, a, li, td, th, input, textarea, select, button {
    font-family: var(--font-family-body) !important;
}

/* Exclude iconify-icon from font-family rules */
iconify-icon, iconify-icon * {
    font-family: inherit !important;
}

/* Ensure paragraphs specifically use Instrument Sans */
body p, .block p, .text p, .content p {
    font-family: var(--font-family-body) !important;
}

/* Override for headers - they should use Space Grotesk */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
}

/* Monospace font for code/technical elements */
code, pre, .mono {
    font-family: var(--font-family-mono);
}

body {
    margin: 0;
    padding-top: 71px;
    background-color: var(--bg);
    color: #0f1115;
    font-size: 16px;
    font-family: var(--font-family-body);
}

@media (min-width: 1024px) {
    body {
        font-size: 17px;
    }
}

body.bg {
    padding-top: 0;
}

b, strong {
    font-weight: var(--font-weight-bold);
}

.ml-auto {
    margin-left: auto;
}

.bg-white {
    background: #fff;
}

.desktop {
    display: none;
}

.mobile {
    display: block;
}

@media (min-width: 1024px) {
    .desktop {
        display: block;
    }

    .mobile {
        display: none;
    }
}

.hidden {
    display: none;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.ml-5 {
    margin-left: 5px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-0 {
    margin-right: 0 !important;
}

.ml-10 {
    margin-left: 10px;
}

.mr-20 {
    margin-right: 20px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.w-1\/3 {
    width: 100%;
}

@media (min-width: 1024px) {
    .w-1\/3 {
        width: 33.33%;
    }
    .w-1\/2 {
        width: 50%;
    }
    .w-2\/3 {
        width: 66.66%;
    }
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.error {
    background: var(--red);
    color: #fff;
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
    font-weight: 600;
}

.success {
    background: var(--green);
    color: #fff;
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
    font-weight: 600;
}

.text-green {
    color: var(--green);
}

.text-right {
    text-align: right !important;
}

.text-bold {
    font-weight: bold !important;
}

.text-blue {
    color: var(--brand-color) !important;
}

.text-gray {
    color: #aaa !important;
}

h4 {
    font-weight: 600;
    color: #6f6f6f;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0;
}

/* Logo lockup: "OS" in primary (teal), slight spacing so it's not tight */
.logo-os {
    color: var(--teal-primary);
    margin-left: 1px;
}