/* ============================================================
   PINNACLE ROOFING PROFESSIONALS — Design Tokens
   vars.css  |  All CSS custom properties for the PRP portal
   ============================================================ */

/* Base: 1rem = 10px */
html {
    font-size: 10px;
    box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

body {
    font-size: 1.6rem;
    line-height: 150%;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {

    /* ── Brand Colors ── */
    --color-accent:          #00c853;
    --color-accent-dark:     #009624;
    --color-accent-light:    #5efc82;
    --color-accent-muted:    rgba(0, 200, 83, 0.12);
    --color-accent-border:   rgba(0, 200, 83, 0.30);

    /* ── Sidebar ── */
    --color-sidebar-bg:      #1a1a1a;
    --color-sidebar-border:  #2a2a2a;
    --color-sidebar-text:    #d4d6da;
    --color-sidebar-text-muted: #969aa3;  /* ~5.6:1 on #1a1a1a — WCAG AA */
    --color-sidebar-hover:   #242424;
    --color-sidebar-active:  #1e2e1e;
    --color-sidebar-active-text: #00c853;
    --color-sidebar-width:   24rem;
    --color-sidebar-width-collapsed: 7.2rem;

    /* ── Page / Surface ── */
    --color-page-bg:         #f4f5f7;
    --color-surface:         #ffffff;
    --color-surface-raised:  #ffffff;
    --color-surface-inset:   #f8f9fa;
    --color-border:          #e2e4e9;
    --color-border-subtle:   #eff0f3;
    --color-border-strong:   #c8ccd4;

    /* ── Text ── */
    --color-text-primary:    #111827;
    --color-text-secondary:  #414b5a;  /* ~8.6:1 on #fff */
    --color-text-muted:      #6b7280;  /* ~4.8:1 on #fff — WCAG AA */
    --color-text-placeholder:#9ca3af;  /* visible placeholder */
    --color-text-inverse:    #ffffff;

    /* ── Status Badges ── */
    --color-badge-draft-bg:       #f3f4f6;
    --color-badge-draft-text:     #6b7280;
    --color-badge-draft-border:   #d1d5db;

    --color-badge-sent-bg:        #eff6ff;
    --color-badge-sent-text:      #1d4ed8;
    --color-badge-sent-border:    #bfdbfe;

    --color-badge-approved-bg:    #f0fdf4;
    --color-badge-approved-text:  #166534;
    --color-badge-approved-border:#bbf7d0;

    --color-badge-declined-bg:    #fef2f2;
    --color-badge-declined-text:  #991b1b;
    --color-badge-declined-border:#fecaca;

    --color-badge-completed-bg:   #fafafa;
    --color-badge-completed-text: #374151;
    --color-badge-completed-border:#d1d5db;

    /* ── Feedback ── */
    --color-error:           #dc2626;
    --color-error-bg:        #fef2f2;
    --color-error-border:    #fca5a5;
    --color-success:         #16a34a;
    --color-success-bg:      #f0fdf4;
    --color-success-border:  #86efac;
    --color-warning:         #d97706;
    --color-warning-bg:      #fffbeb;
    --color-warning-border:  #fcd34d;

    /* ── Typography ── */
    --font-display:  'Oswald', sans-serif;
    --font-body:     'Inter', sans-serif;
    --font-script:   'Dancing Script', cursive;

    /* 1rem = 10px. Readable floor is 16px (1.6rem); only --text-note is
       allowed to be smaller, for genuine fine-print (hints, counters). */
    --text-note:     1.3rem;   /* 13px — small notes / fine print ONLY */
    --text-xs:       1.6rem;   /* 16px (floor) */
    --text-sm:       1.6rem;   /* 16px (floor) */
    --text-base:     1.6rem;   /* 16px — body default */
    --text-md:       1.7rem;   /* 17px */
    --text-lg:       1.8rem;   /* 18px */
    --text-xl:       2.0rem;   /* 20px */
    --text-2xl:      2.4rem;   /* 24px */
    --text-3xl:      3.0rem;   /* 30px */

    --weight-light:  300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semi:   600;
    --weight-bold:   700;

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-normal:1.5;
    --leading-loose: 1.7;

    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-wider:  0.08em;
    --tracking-widest: 0.12em;

    /* ── Spacing ── */
    /* 1rem = 10px */
    --space-1:   0.4rem;   /*  4px */
    --space-2:   0.8rem;   /*  8px */
    --space-3:   1.2rem;   /* 12px */
    --space-4:   1.6rem;   /* 16px */
    --space-5:   2rem;     /* 20px */
    --space-6:   2.4rem;   /* 24px */
    --space-8:   3.2rem;   /* 32px */
    --space-10:  4rem;     /* 40px */
    --space-12:  4.8rem;   /* 48px */
    --space-16:  6.4rem;   /* 64px */

    /* ── Radii ── */
    --radius-sm:  0.4rem;   /*  4px */
    --radius-md:  0.8rem;   /*  8px */
    --radius-lg:  1.2rem;   /* 12px */
    --radius-xl:  1.6rem;   /* 16px */
    --radius-full:9999rem;

    /* ── Shadows ── */
    --shadow-xs:  0 1px 0.2rem 0 rgba(0,0,0,0.05);
    --shadow-sm:  0 1px 0.3rem 0 rgba(0,0,0,0.08), 0 1px 0.2rem -1px rgba(0,0,0,0.06);
    --shadow-md:  0 0.4rem 0.6rem -1px rgba(0,0,0,0.08), 0 0.2rem 0.4rem -0.2rem rgba(0,0,0,0.06);
    --shadow-lg:  0 1rem 1.5rem -0.3rem rgba(0,0,0,0.08), 0 0.4rem 0.6rem -0.4rem rgba(0,0,0,0.05);
    --shadow-xl:  0 2rem 2.5rem -0.5rem rgba(0,0,0,0.10), 0 0.8rem 1rem -0.6rem rgba(0,0,0,0.05);
    --shadow-inner: inset 0 0.2rem 0.4rem 0 rgba(0,0,0,0.05);
    --shadow-focus: 0 0 0 0.3rem rgba(0, 200, 83, 0.22);

    /* ── Transitions ── */
    --transition-fast:   100ms ease;
    --transition-base:   160ms ease;
    --transition-slow:   260ms ease;
    --transition-spring: 220ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index ── */
    --z-base:    1;
    --z-dropdown:100;
    --z-sticky:  200;
    --z-topbar:  300;
    --z-sidebar: 400;
    --z-overlay: 500;
    --z-modal:   600;
    --z-toast:   700;
}