/**
 * SageScreen Design Tokens
 *
 * Single source of truth for all design values.
 * All other CSS files should reference these variables.
 */

/* Google Fonts - Poppins (headings), Roboto (body), Manrope (buttons) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
    /* ==========================================================================
       COLORS
       ========================================================================== */

    /* Brand Colors */
    --ss-color-brand: #6A996A;
    --ss-color-brand-hover: #618861;
    --ss-color-alt-brand: #565C56;

    /* Text Colors */
    --ss-color-text: #454F5E;
    --ss-color-text-light: #6b7280;
    --ss-color-text-inverse: #FFFFFF;
    --ss-color-heading: #6A996A;

    /* Link Colors - use brand green, not orange (orange is for forms only) */
    --ss-color-link: #6A996A;
    --ss-color-link-hover: rgba(159, 173, 142, 0.57);

    /* Background Colors */
    --ss-color-bg: #FFFFFF;
    --ss-color-bg-secondary: #EBE5D9;
    --ss-color-bg-subtle: rgba(159, 173, 142, 0.57);
    --ss-color-bg-hover: #f9fafb;

    /* Border Colors */
    --ss-color-border: #000000;
    --ss-color-border-light: #e5e7eb;

    /* Form Accent (Orange) */
    --ss-color-form-accent: #d3642c;
    --ss-color-form-accent-hover: #9b4016;

    /* Card Header Gradients */
    --ss-gradient-green: #6A996A;
    --ss-gradient-orange: #d3642c;
    --ss-gradient-grey: #9ca3af;

    /* ==========================================================================
       NOTIFICATIONS
       ========================================================================== */

    /* Success */
    --ss-notify-success-bg: #f0fdf4;
    --ss-notify-success-border: #15803d;
    --ss-notify-success-color: #15803d;

    /* Warning */
    --ss-notify-warning-bg: #ffedd5;
    --ss-notify-warning-border: #c2410c;
    --ss-notify-warning-color: #c2410c;

    /* Error */
    --ss-notify-error-bg: #fff5f5;
    --ss-notify-error-border: #fc8181;
    --ss-notify-error-color: #b91c1c;

    /* Info */
    --ss-notify-info-bg: #ecfeff;
    --ss-notify-info-border: #0e7490;
    --ss-notify-info-color: #0e7490;

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

    /* Font Families */
    --ss-font-headings: 'Poppins', sans-serif;
    --ss-font-body: 'Roboto', sans-serif;
    --ss-font-buttons: 'Manrope', sans-serif;

    /* Body Font Sizes */
    --ss-font-size-website: 14px;
    --ss-font-size-app: 12px;
    --ss-font-size-meta: 12px;

    /* Body Line Heights */
    --ss-line-height-website: 1.6;
    --ss-line-height-app: 1.6;
    --ss-line-height-meta: 1.5;

    /* Body Weight */
    --ss-font-weight-body: 400;

    /* Meta Text Opacity */
    --ss-meta-opacity: 0.7;

    /* Heading Sizes */
    --ss-font-size-h1: 48px;
    --ss-font-size-h2: 38px;
    --ss-font-size-h3: 30px;
    --ss-font-size-h4: 24px;
    --ss-font-size-h5: 20px;
    --ss-font-size-h6: 17px;

    /* Heading Line Heights */
    --ss-line-height-h1: 1.2em;
    --ss-line-height-h2: 1.25;
    --ss-line-height-h3: 1.2;
    --ss-line-height-h4: 1.16;
    --ss-line-height-h5: 27px;
    --ss-line-height-h6: 1.25em;

    /* Font Weights */
    --ss-font-weight-normal: 400;
    --ss-font-weight-medium: 500;
    --ss-font-weight-semibold: 600;
    --ss-font-weight-bold: 700;
    --ss-font-weight-heading: 600;

    /* ==========================================================================
       BUTTONS
       ========================================================================== */

    --ss-btn-padding: 17px 35px;
    --ss-btn-border-radius: 16px;
    --ss-btn-font-size: 18px;
    --ss-btn-font-weight: 700;

    /* Primary Button */
    --ss-btn-primary-bg: var(--ss-color-brand);
    --ss-btn-primary-color: #FFFFFF;
    --ss-btn-primary-hover-bg: var(--ss-color-brand-hover);

    /* Secondary Button */
    --ss-btn-secondary-bg: #FFFFFF;
    --ss-btn-secondary-color: #000000;
    --ss-btn-secondary-border: 1px solid #000000;
    --ss-btn-secondary-hover-bg: #f9fafb;

    /* Form Button (Orange) */
    --ss-btn-form-bg: var(--ss-color-form-accent);
    --ss-btn-form-color: #FFFFFF;
    --ss-btn-form-hover-bg: var(--ss-color-form-accent-hover);

    /* ==========================================================================
       FORM CANCEL LINK
       ========================================================================== */

    --ss-form-cancel-color: var(--ss-color-form-accent);
    --ss-form-cancel-hover-bg: var(--ss-color-form-accent-hover);
    --ss-form-cancel-hover-color: #FFFFFF;
    --ss-form-cancel-font-size: 16px;
    --ss-form-cancel-font-weight: 600;

    /* ==========================================================================
       CARDS
       ========================================================================== */

    --ss-card-border-radius: 16px;
    --ss-card-bg-white: #FFFFFF;
    --ss-card-bg-tan: #EBE5D9;
    --ss-card-bg-subtle-green: rgba(159, 173, 142, 0.57);

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

    --ss-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --ss-shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* ==========================================================================
       SPACING (for consistency)
       ========================================================================== */

    --ss-spacing-xs: 4px;
    --ss-spacing-sm: 8px;
    --ss-spacing-md: 16px;
    --ss-spacing-lg: 24px;
    --ss-spacing-xl: 32px;
}