/* Variables & Design Tokens */

/* Self-hosted IBM Plex Sans — Saudi Platforms Design Code */

/* IBM Plex Sans — Latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSans-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSans-Bold.woff2') format('woff2');
}

/* IBM Plex Sans Arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSansArabic-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/oneclick_ui/fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
}

/* Design Tokens */
:root {
  /* Primary — Saudi SA Palette */
  --oc-primary-25: #F7FDF9;
  --oc-primary-50: #F3FCF6;
  --oc-primary-100: #DFF6E7;
  --oc-primary-200: #B8EACB;
  --oc-primary-300: #88D8AD;
  --oc-primary-400: #54C08A;
  --oc-primary-500: #25935F;
  --oc-primary-600: #1B8354;
  --oc-primary-700: #166A45;
  --oc-primary-800: #14573A;
  --oc-primary-900: #104631;
  --oc-primary-950: #092A1E;

  /* Neutral — Saudi Gray Palette */
  --oc-neutral-0: #ffffff;
  --oc-neutral-25: #FCFCFD;
  --oc-neutral-50: #F9FAFB;
  --oc-neutral-100: #F3F4F6;
  --oc-neutral-200: #E5E7EB;
  --oc-neutral-300: #D2D6DB;
  --oc-neutral-400: #9DA4AE;
  --oc-neutral-500: #6C737F;
  --oc-neutral-600: #4D5761;
  --oc-neutral-700: #384250;
  --oc-neutral-800: #1F2A37;
  --oc-neutral-900: #111927;
  --oc-neutral-950: #0D121C;

  /* Error */
  --oc-error-25: #FFFBFA;
  --oc-error-50: #FEF3F2;
  --oc-error-100: #FEE4E2;
  --oc-error-200: #FECDCA;
  --oc-error-300: #FDA29B;
  --oc-error-400: #F97066;
  --oc-error-500: #F04438;
  --oc-error-600: #D92020;
  --oc-error-700: #B42318;
  --oc-error-800: #912018;
  --oc-error-900: #7A271A;
  --oc-error-950: #55160C;

  /* Warning */
  --oc-warning-25: #FFFCF5;
  --oc-warning-50: #FFFAEB;
  --oc-warning-100: #FEF0C7;
  --oc-warning-200: #FEDF89;
  --oc-warning-300: #FEC84B;
  --oc-warning-400: #FDB022;
  --oc-warning-500: #F79009;
  --oc-warning-600: #DC6803;
  --oc-warning-700: #B54708;
  --oc-warning-800: #93370D;
  --oc-warning-900: #7A2E0E;
  --oc-warning-950: #4F1D09;

  /* Success */
  --oc-success-25: #F6FEF9;
  --oc-success-50: #ECFDF3;
  --oc-success-100: #DCFAE6;
  --oc-success-200: #A6EFC6;
  --oc-success-300: #75E0A7;
  --oc-success-400: #47CD89;
  --oc-success-500: #17B26A;
  --oc-success-600: #079455;
  --oc-success-700: #067647;
  --oc-success-800: #085D3A;
  --oc-success-900: #074D31;
  --oc-success-950: #053321;

  /* Info */
  --oc-info-50: #E3F2FD;
  --oc-info-100: #BBDEFB;
  --oc-info-500: #1976D2;
  --oc-info-600: #1570EF;

  /* Text Colors — Light Backgrounds */
  --oc-text-primary: var(--oc-neutral-800);
  --oc-text-secondary: var(--oc-neutral-600);
  --oc-text-tertiary: var(--oc-neutral-500);
  --oc-text-placeholder: var(--oc-neutral-500);
  --oc-text-disabled: var(--oc-neutral-400);

  /* Text Colors — Dark Backgrounds */
  --oc-text-inverse: var(--oc-neutral-0);
  --oc-text-inverse-secondary: rgba(255, 255, 255, 0.7);
  --oc-text-inverse-tertiary: rgba(255, 255, 255, 0.6);

  /* Semantic Text Colors */
  --oc-text-error: var(--oc-error-600);
  --oc-text-warning: var(--oc-warning-600);
  --oc-text-success: var(--oc-success-600);
  --oc-text-info: var(--oc-info-600);

  /* Typography — Saudi Platforms Design Code */
  --oc-font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --oc-font-en: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --oc-font-base: var(--oc-font-en);

  /* Spacing — Saudi Platforms Design Code */
  --oc-space-none: 0px;
  --oc-space-xxs: 2px;
  --oc-space-xs: 4px;
  --oc-space-sm: 6px;
  --oc-space-md: 8px;
  --oc-space-lg: 12px;
  --oc-space-xl: 16px;
  --oc-space-2xl: 20px;
  --oc-space-3xl: 24px;
  --oc-space-4xl: 32px;
  --oc-space-5xl: 40px;
  --oc-space-6xl: 48px;
  --oc-space-7xl: 64px;
  --oc-space-8xl: 80px;
  --oc-space-9xl: 96px;
  --oc-space-10xl: 128px;
  --oc-space-11xl: 160px;

  /* Icon Sizes — Saudi Platforms Design Code */
  --oc-icon-xs: 10px;
  --oc-icon-2xs: 14px;
  --oc-icon-3xs: 16px;
  --oc-icon-sm: 18px;
  --oc-icon-2sm: 20px;
  --oc-icon-md: 24px;
  --oc-icon-lg: 28px;
  --oc-icon-xl: 32px;

  /* Container Widths — Saudi Platforms Design Code */
  --oc-width-xxs: 20rem;
  --oc-width-xs: 24rem;
  --oc-width-sm: 30rem;
  --oc-width-md: 35rem;
  --oc-width-lg: 40rem;
  --oc-width-xl: 48rem;
  --oc-width-2xl: 64rem;
  --oc-width-3xl: 80rem;
  --oc-width-4xl: 90rem;
  --oc-width-5xl: 100rem;
  --oc-width-6xl: 120rem;

  /* Radius */
  --oc-radius-xs: 2px;
  --oc-radius-sm: 6px;
  --oc-radius-md: 10px;
  --oc-radius-lg: 16px;
  --oc-radius-xl: 24px;
  --oc-radius-full: 9999px;

  /* Shadows — Saudi Platforms #101828 */
  --oc-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --oc-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
  --oc-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --oc-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --oc-shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --oc-shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --oc-shadow-3xl: 0 32px 64px -12px rgba(16, 24, 40, 0.14);
  --oc-shadow-glow: 0 0 0 3px rgba(37, 147, 95, 0.15);
  --oc-shadow-primary: 0 4px 14px rgba(37, 147, 95, 0.35);
  --oc-shadow-primary-hover: 0 6px 20px rgba(37, 147, 95, 0.40);
  --oc-shadow-error: 0 4px 14px rgba(240, 68, 56, 0.30);
  --oc-shadow-error-hover: 0 6px 20px rgba(217, 32, 32, 0.40);

  /* Transitions */
  --oc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --oc-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --oc-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* State roles — mirror sidebar (layout.css reference) */
  --oc-state-active-bg: var(--oc-primary-50);
  --oc-state-active-text: var(--oc-primary-600);
  --oc-state-active-border: var(--oc-primary-600);
  --oc-state-hover-bg: var(--oc-neutral-100);
  --oc-state-hover-text: var(--oc-primary-600);

  /* Interactive */
  --oc-link: var(--oc-primary-600);
  --oc-link-hover: var(--oc-primary-700);

  /* Charts */
  --oc-chart-line: var(--oc-primary-500);
  --oc-chart-line-alt: var(--oc-primary-600);
  --oc-chart-fill: var(--oc-primary-100);

  /* Frappe bridge */
  --primary: var(--oc-primary-500);

  /* Onboarding active row — mirror sidebar */
  --oc-onboarding-active-bg: var(--oc-primary-50);
  --oc-onboarding-active-text: var(--oc-primary-600);
  --oc-onboarding-active-muted: var(--oc-primary-500);
  --oc-onboarding-active-icon: var(--oc-primary-600);

  /* Workspace headings */
  --oc-heading-accent: var(--oc-primary-600);

  /* Widget row links — grey default, onboarding-style hover */
  --oc-row-default-bg: var(--oc-neutral-100);
  --oc-row-default-text: var(--oc-neutral-600);
  --oc-row-default-icon: var(--oc-neutral-500);
  --oc-row-chip-padding: 5px 8px;
  --oc-row-chip-radius: 5px;
  --oc-row-chip-gap: 4px;
  --oc-row-hover-bg: var(--oc-onboarding-active-bg);
  --oc-row-hover-text: var(--oc-onboarding-active-text);
  --oc-row-hover-icon: var(--oc-onboarding-active-icon);

  /* Checkboxes — circular emerald */
  --oc-checkbox-size: 16px;
  --oc-checkbox-check-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --checkbox-size: var(--oc-checkbox-size);

  /* Input height */
  --input-height: 35px;

  /* Toolbar & filter spacing */
  --oc-toolbar-gap: var(--oc-space-lg);
  --oc-filter-gap: var(--oc-space-md);
  --oc-action-gap: var(--oc-space-md);
  --oc-head-action-gap: var(--oc-space-md);
  --oc-btn-group-divider: var(--oc-neutral-300);
  --oc-toolbar-btn-margin-x: var(--oc-space-xs);
  --oc-toolbar-cluster-gap: var(--oc-space-md);

  /* List view table */
  --oc-list-bg: #ffffff;
  --oc-list-divider: #eeeeee;
  --oc-list-divider-strong: #cccccc;
  --oc-list-head-bg: var(--oc-list-bg);
  --oc-list-checkbox-inset: 11px;
  --oc-list-checkbox-gap: calc(var(--oc-checkbox-size) / 2 + var(--oc-space-md));

  /* Desk table system (list + datatable) */
  --oc-table-bg: var(--oc-list-bg);
  --oc-table-divider: var(--oc-list-divider);
  --oc-table-head-bg: var(--oc-list-head-bg);
  --oc-table-hover-bg: var(--oc-row-hover-bg);
  --oc-table-hover-text: var(--oc-row-hover-text);

  /* Responsive breakpoints & layout */
  --oc-bp-mobile: 576px;
  --oc-bp-tablet: 768px;
  --oc-bp-desktop: 992px;
  --oc-bp-wide: 1200px;
  --oc-sidebar-width: 250px;
  --oc-sidebar-collapsed-width: 56px;
  --oc-mobile-nav-height: 51px;

  /* Green sidebar system */
  --oc-sidebar-bg: var(--oc-primary-700);
  --oc-sidebar-fg: var(--oc-neutral-0);
  --oc-sidebar-fg-muted: var(--oc-neutral-100);
  --oc-sidebar-item-hover-bg: var(--oc-primary-100);
  --oc-sidebar-item-selected-bg: var(--oc-neutral-0);
  --oc-sidebar-item-active-fg: var(--oc-primary-700);

}