/**
 * OCTOCargo Branding Library
 * Smooth portal design tokens derived from the CargoLog brand.
 *
 * Single source of truth for colors, typography, and role-based theming.
 * All portal views (login, supplier, client, admin) consume these variables.
 */

/* ==========================================================================
   1. Global Design Tokens
   ========================================================================== */

:root {
    /* ── Brand colors (from cargolog.ro) ─────────────────────────── */
    --oc-gold:            #f2c300;
    --oc-gold-hover:      #d9af00;
    --oc-gold-light:      #fdf4cc;
    --oc-gold-subtle:     #fef9e6;

    --oc-charcoal:        #2f3434;
    --oc-charcoal-hover:  #1f2424;
    --oc-charcoal-light:  #6f7777;
    --oc-charcoal-subtle: #f4f5f1;

    --oc-white:           #ffffff;
    --oc-black:           #000000;

    /* ── Semantic colors ─────────────────────────────────────────── */
    --oc-primary:         var(--oc-charcoal);
    --oc-primary-hover:   var(--oc-charcoal-hover);
    --oc-accent:          var(--oc-gold);
    --oc-accent-hover:    var(--oc-gold-hover);
    --oc-accent-light:    var(--oc-gold-light);
    --oc-accent-subtle:   var(--oc-gold-subtle);

    --oc-bg:              #f7f8fb;
    --oc-bg-card:         var(--oc-white);
    --oc-bg-header:       var(--oc-white);

    --oc-text:            #2f3437;
    --oc-text-secondary:  #6c757d;
    --oc-text-muted:      #adb5bd;
    --oc-text-on-primary: var(--oc-white);
    --oc-text-on-accent:  var(--oc-charcoal);

    --oc-border:          #e0e0e0;
    --oc-border-light:    #f0f0f0;

    /* ── Functional colors ───────────────────────────────────────── */
    --oc-success:         #28a745;
    --oc-success-light:   #d4edda;
    --oc-warning:         #ffc107;
    --oc-warning-light:   #fff3cd;
    --oc-danger:          #dc3545;
    --oc-danger-light:    #f8d7da;
    --oc-info:            #17a2b8;
    --oc-info-light:      #d1ecf1;

    /* ── Typography ─────────────────────────────────────────────── */
    --oc-font-primary:    'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --oc-font-heading:    'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --oc-font-mono:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --oc-font-size-base:  100%;  /* 16px root — matches login page */

    /* ── Type scale (8-step enterprise) ─────────────────────────── */
    --oc-text-xs:    0.75rem;     /* 12px — timestamps, badge text, counters */
    --oc-text-sm:    0.8125rem;   /* 13px — secondary labels, hints, footer */
    --oc-text-base:  0.875rem;    /* 14px — body text, table cells, inputs, buttons */
    --oc-text-md:    1rem;        /* 16px — card headers, section titles, nav links */
    --oc-text-lg:    1.125rem;    /* 18px — page sub-headings */
    --oc-text-xl:    1.25rem;     /* 20px — major headings */
    --oc-text-2xl:   1.5rem;      /* 24px — page titles */
    --oc-text-3xl:   1.75rem;     /* 28px — hero headings */

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

    --oc-line-height:     1.5;
    --oc-letter-spacing:  0.3px;

    /* ── Shadows ─────────────────────────────────────────────────── */
    --oc-shadow-sm:       0 4px 12px rgba(31, 36, 36, 0.07);
    --oc-shadow:          0 3px 12px rgba(31, 36, 36, 0.10);
    --oc-shadow-lg:       0 10px 24px rgba(31, 36, 36, 0.13);
    --oc-shadow-xl:       0 16px 40px rgba(31, 36, 36, 0.16);

    /* ── Radii ───────────────────────────────────────────────────── */
    --oc-radius-sm:       4px;
    --oc-radius:          10px;
    --oc-radius-lg:       14px;
    --oc-radius-pill:     50px;

    /* ── Navbar ───────────────────────────────────────────────────── */
    --oc-navbar-bg:       var(--oc-white);
    --oc-navbar-bg-end:   var(--oc-charcoal-subtle);
    --oc-navbar-text:     var(--oc-charcoal);
    --oc-navbar-text-active: var(--oc-charcoal-hover);
    --oc-navbar-accent:   var(--oc-charcoal);

    /* ── Focus ring ──────────────────────────────────────────────── */
    --oc-focus-ring:      0 0 0 0.15rem rgba(242, 195, 0, 0.35);

    /* ── Transitions ─────────────────────────────────────────────── */
    --oc-transition:      0.15s ease;
}


/* ==========================================================================
   2. Role-Based Theme Overrides
   Each role gets a distinct accent so users can instantly identify their view.
   ========================================================================== */

/* Supplier (Furnizor) — Gold accent (default brand) */
[data-role="supplier"] {
    --oc-role-accent:       var(--oc-gold);
    --oc-role-accent-hover: var(--oc-gold-hover);
    --oc-role-accent-light: var(--oc-gold-light);
    --oc-role-text-on-accent: var(--oc-charcoal);
    --oc-role-stat-border:  var(--oc-gold);
}

/* Client — Teal accent */
[data-role="client"] {
    --oc-role-accent:       #0d9488;
    --oc-role-accent-hover: #0b7f74;
    --oc-role-accent-light: #ccfbf1;
    --oc-role-text-on-accent: var(--oc-white);
    --oc-role-stat-border:  #0d9488;
}

/* Admin — Deep charcoal with gold highlights */
[data-role="admin"] {
    --oc-role-accent:       var(--oc-gold);
    --oc-role-accent-hover: var(--oc-gold-hover);
    --oc-role-accent-light: var(--oc-gold-light);
    --oc-role-text-on-accent: var(--oc-charcoal);
    --oc-role-stat-border:  var(--oc-charcoal);
}


/* ==========================================================================
   3. Component Tokens (consumed by style.css & portal.css)
   ========================================================================== */

:root {
    /* ── Buttons ──────────────────────────────────────────────────── */
    --oc-btn-primary-bg:      var(--oc-accent);
    --oc-btn-primary-border:  var(--oc-accent);
    --oc-btn-primary-text:    var(--oc-text-on-accent);
    --oc-btn-primary-bg-hover:    var(--oc-accent-hover);
    --oc-btn-primary-border-hover: var(--oc-accent-hover);

    --oc-btn-action-bg:       var(--oc-primary);
    --oc-btn-action-border:   var(--oc-primary);
    --oc-btn-action-text:     var(--oc-text-on-primary);
    --oc-btn-action-bg-hover: var(--oc-primary-hover);
    --oc-btn-action-border-hover: var(--oc-primary-hover);

    /* ── Pagination ───────────────────────────────────────────────── */
    --oc-pagination-active-bg:    var(--oc-primary);
    --oc-pagination-active-border: var(--oc-primary);
    --oc-pagination-link-color:   var(--oc-primary);

    /* ── Tables ────────────────────────────────────────────────────── */
    --oc-table-hover-bg:      rgba(242, 195, 0, 0.04);
    --oc-table-header-bg:     var(--oc-charcoal-subtle);

    /* ── Notifications ────────────────────────────────────────────── */
    --oc-notification-unread-bg:    var(--oc-accent-subtle);
    --oc-notification-unread-border: var(--oc-accent);

    /* ── Upload area ──────────────────────────────────────────────── */
    --oc-upload-hover-border: var(--oc-accent);
    --oc-upload-hover-bg:     var(--oc-accent-subtle);

    /* ── Login page (white background, matching cargolog.ro) ──────── */
    --oc-login-bg:            var(--oc-white);
    --oc-login-accent:        var(--oc-gold);
    --oc-login-btn-bg:        var(--oc-gold);
    --oc-login-btn-text:      var(--oc-charcoal);
    --oc-login-btn-hover:     var(--oc-gold-hover);
}